상태 흐름

state와 props 흐름

useState와 props의 역할을 구분하고 상태 관리가 커질 때 다음 단계로 넘어가는 기준을 정리합니다.

useState

지역 상태

입력값, 열림 여부, 선택 탭처럼 한 컴포넌트 주변에서 바뀌는 값에 적합합니다.

props

하향식 전달

상위 컴포넌트가 가진 데이터를 자식 UI에 명확하게 전달합니다.

확장

공유 상태 신호

멀리 떨어진 컴포넌트가 같은 값을 자주 쓰면 Context나 상태 라이브러리를 검토합니다.

구분 질문

상태 변경·조회 주체

상태를 아무 곳에나 두면 데이터 흐름이 흐려지므로 값을 변경하는 주체와 표시하는 위치를 분리해서 생각합니다.

상태 기준

가까움한 컴포넌트와 바로 아래 자식만 쓰면 useState와 props로 충분합니다.
공유여러 화면이 같은 값을 읽으면 상위로 올리거나 Context를 씁니다.
서버 데이터API 결과 캐시와 동기화가 필요하면 데이터 라이브러리를 검토합니다.