상태 관리 도구 선택

상태 관리 선택 기준

Prop Drilling이 보인다고 곧바로 전역 상태 도구가 필요한 것은 아닙니다. 상태가 URL에서 왔는지, 서버 데이터인지, 여러 화면이 공유하는지, 한 컴포넌트 안의 UI 상태인지 나누면 도구 선택이 자연스럽게 좁혀집니다.

01

상태 출처를 분류한다

사용자 입력, URL, 서버 응답, 브라우저 저장소 중 어디에서 온 값인지 먼저 나눕니다.

source
02

공유 범위를 그린다

한 컴포넌트, 형제, 페이지 전체, 앱 전체 중 누가 읽는지 표시합니다.

범위
03

갱신 책임 결정

서버 데이터는 fetching/cache 도구, 순수 UI 상태는 React local state나 context로 충분할 수 있습니다.

owner
04

도구를 마지막에 고른다

Redux, Zustand, React Query 같은 이름보다 해결할 책임을 먼저 정해야 과도한 전역화를 피합니다.

tool
Local state
한 UI 조각 안에서만 쓰는 값 모달 열림, 입력 focus, 임시 선택은 가까운 곳에 둡니다.
local
Client global
여러 화면이 공유하는 클라이언트 상태 테마, auth view state, editor selection처럼 서버 원본이 아닌 값입니다.
shared
Server state
서버가 원본인 비동기 데이터 캐시, stale, refetch, optimistic update가 핵심이라 전용 도구가 유리합니다.
server

전역화 이유 · URL 상태 · 서버 캐시 점검

전역화 이유 props 전달이 불편하다는 이유만으로 앱 전체 상태를 만들지 않습니다.
URL 상태 공유와 새로고침이 필요한 필터나 페이지는 URL에 두는 편이 낫습니다.
서버 캐시 서버 데이터와 클라이언트 편집 상태를 같은 store에 섞지 않습니다.

상태 분류표

input focus -> local state
검색 필터 -> URL query
사용자 목록 -> server cache
테마 -> client global