Documentation

React 정리

React의 기본 개념과 컴포넌트 설계 기준을 정리한 문서입니다.

Overview

React 개요

React는 UI를 컴포넌트 단위로 나누고 상태 변화에 따라 화면을 갱신하는 라이브러리입니다.

컴포넌트는 작게 만들고 props로 필요한 데이터만 넘기는 것이 유지보수에 유리합니다.

상태는 실제로 화면을 바꾸는 값에만 두고, 계산 가능한 값은 렌더링 중에 계산합니다.

State and props

props는 부모가 내려주는 값이고, state는 컴포넌트가 기억해야 하는 값입니다.

같은 상태가 여러 컴포넌트에서 필요하면 가장 가까운 공통 부모로 끌어올립니다.

상태 업데이트는 이전 값에 의존할 때 함수형 업데이트를 사용하면 안전합니다.

Components

컴포넌트는 데이터 표시, 입력 처리, 레이아웃 역할을 섞지 않는 편이 좋습니다.

반복되는 UI는 재사용 컴포넌트로 분리하고, 페이지 전용 로직은 페이지 가까이에 둡니다.

폼, 리스트, 모달처럼 상태가 많은 UI는 제어 흐름을 먼저 정리한 뒤 구현합니다.