👨🏻‍💻DriedPollack's Blog

리액트를 활용한 미니 블로그 프로젝트입니다. 프로젝트는 list, page, ui 컴포넌트로 구성되며, 주요 기능은 글 목록 보기, 글 보기, 댓글 보기, 글 작성, 댓글 작성입니다. 프로젝트에서는 styled-components를 사용하여 컴포넌트를 스타일링하고, 데이터를 활용하여 동적으로 컴포넌트를 생성합니다.

이 포스트는 React의 styled-components를 사용하여 버튼과 블록을 스타일링하는 방법을 소개한다. styled-components는 CSS 문법을 그대로 사용하면서 스타일링된 컴포넌트를 생성할 수 있는 오픈소스 라이브러리다. 이를 통해 동적으로 스타일을 변경할 수 있고, 컴포넌트 개념을 활용하여 리액트에서 사용하기 용이합니다.

터미널에 ctrl + c 를 입력하면 ^C^C일괄 작업을 끝내시겠습니까 (Y/N)? 라는 문구가 출력되는데, Y를 입력하게 되면 리액트 프로젝트가 정지된다.

이 포스트에서는 리액트 컴포넌트 트리 내에서 데이터를 공유하기 위해 컨텍스트를 활용하는 방법을 학습했습니다. 컨텍스트를 이용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않고도 데이터를 제공할 수 있어 코드 최적화에 도움이 됩니다.

이 포스트는 리액트의 합성과 상속에 대해서 다룹니다. 핵심 키워드로는 합성과 특수화가 있으며, 특수화는 더 구체적인 컴포넌트를 생성하고 props를 통해 내용을 설정하는 것을 의미합니다.

이 포스트에서는 컴포넌트를 효율적으로 사용하고, 공유 상태를 통해 부모 컴포넌트의 상태를 자식 컴포넌트에서 공유할 수 있으며, 소수점 자릿수를 반올림하는 방법을 정리했습니다.

이 포스트는 각각의 컴포넌트를 이용해 사용자의 입력을 받는 다양한 방법을 다루고 있으며, 이를 통해 실시간으로 값 변경, 데이터 렌더링, 다중 입력 다루기 등을 소개합니다.

리액트 컴포넌트를 다루는 프로젝트를 통해 학생들의 출석부를 출력하는 방법과 키의 중요성에 대해 알아보았습니다.

이 포스트는 조건부 렌더링과 useState 훅을 활용하여 로그인 여부에 따라 툴바와 텍스트를 렌더링하는 방법을 소개합니다.

React에서 이벤트를 다루는 방법과 바인딩하는 방법에 대해 학습할 수 있는 실습문제입니다. 핸들링 함수 선언 방법, 익명함수 처리 방법, camelCase 이벤트 이름 사용 등을 다루고 있습니다.

이 문서는 리액트와 관련된 여러 실습 예제들을 다루고 있습니다. 주요 내용으로는 useRef를 이용한 DOM 요소 포커스, useEffect를 이용한 사이드 이펙트 처리, 커스텀 훅을 이용한 컴포넌트 개발 등이 있습니다.

리액트 컴포넌트에서 state와 생명주기를 이용하여 알림 기능을 구현했습니다. NotificationList 컴포넌트에서는 state를 사용하여 알림 데이터를 관리하고, componentDidMount와 componentWillUnmount 함수를 이용하여 알림을 주기적으로 업데이트하고 제거합니다. 이를 통해 알림을 동적으로 표시하고 관리할 수 있습니다.

Comment.jsx와 CommentList.jsx는 리액트를 사용하여 댓글 컴포넌트를 만드는 실습 예제입니다. 컴포넌트와 props에 대한 기본적인 이해를 실습을 통해 파악할 수 있습니다.

이 포스트는 리액트를 사용하여 시계 컴포넌트를 만드는 실습 예제와 관련된 내용을 다루고 있습니다. setInterval() 함수를 사용하여 매 초마다 clock 컴포넌트를 root 노드에 렌더링하고, 렌더링이란 컴포넌트가 현재 상태에 기반하여 UI를 구성하는 작업을 의미합니다. React는 Virtual DOM을 사용하여 필요한 부분만 실제 DOM에 반영하여 불필요한 수정을 방지합니다.

이 포스트는 리액트를 다루는 실습 문제로, Btn.jsx, ConfirmDialog.jsx, Book.jsx, Library.jsx, index.jsx 등의 코드 예시가 포함되어 있습니다. 핵심 키워드로는 React의 module 기능, props의 자료형 선언, 문자열 입력 방법, React.StrictMode 태그 등이 있습니다.

React에서 img 태그를 사용할 때는 꼭 alt 속성을 추가해야 합니다. 에러 메시지에서는 의미 있는 텍스트나 장식용 이미지의 경우 빈 문자열로 설정해야 한다고 설명하고 있습니다. 따라서 기존 코드에 alt 속성을 추가하여 문제를 해결할 수 있습니다.