STATE SCOPE LADDER

상태 도구는 데이터가 쓰이는 범위부터 고른다

먼저 컴포넌트 내부, 가까운 부모, 전역 공유, 서버 데이터 중 어디에 속하는지 나누면 라이브러리 선택이 가벼워집니다.

local

한 컴포넌트 안에서만 필요

입력값, 토글, 모달 열림처럼 가까운 UI 상태는 useState로 충분합니다.

lift

형제 컴포넌트가 함께 사용

공통 부모로 상태를 올리고 props와 이벤트 콜백으로 흐름을 유지합니다.

shared

여러 화면에서 반복 사용

인증 사용자, 장바구니, 테마처럼 멀리 공유되면 Context나 전용 스토어를 고려합니다.

remote

서버가 원본을 가진 데이터

목록 조회, 캐시, 재요청은 전역 상태보다 서버 상태 도구의 책임에 가깝습니다.

변경 빈도자주 바뀌는 값은 구독 범위를 좁혀 불필요한 렌더링을 줄입니다.
소유자사용자 입력인지, 서버 응답인지, URL 상태인지 원본을 먼저 정합니다.
디버깅팀이 상태 변경 기록과 DevTools를 얼마나 필요로 하는지 확인합니다.
작게 시작하기

상태 관리 라이브러리는 문제를 줄이기 위한 도구입니다. 공유 범위가 작다면 React 기본 기능으로 시작하고, 반복되는 전달과 동기화 문제가 보일 때 확장합니다.