state placement matrix

상태는 가장 좁고 안정적인 위치에 둔다

서버 데이터, URL, props, local UI, shared store를 한 줄 기준으로 비교해 전역 상태로 올리기 전에 더 작은 위치가 있는지 확인한다.

상태 위치 비교
위치	맞는 값	관리 기준	경고 신호
server	DB, CMS, 외부 API 결과	`fetch` cache와 revalidate로 최신성 관리	클라이언트에서 같은 값을 따로 저장할 때
URL	검색어, 필터, 페이지 번호	공유, 새로고침, 뒤로가기에 남겨야 할 값	링크가 현재 화면 상태를 설명하지 못할 때
props	서버에서 읽고 client leaf가 쓰는 값	필요한 컴포넌트까지만 내려 보낸다	불필요한 하이드레이션 범위가 커질 때
local	모달, 탭, 입력 중 임시 값	새로고침 후 유지 필요가 낮으면 지역에 둔다	여러 client leaf가 동시에 읽기 시작할 때
shared	여러 client leaf가 함께 읽는 UI 상태	Context나 store는 마지막 선택지로 둔다	서버 값과 클라이언트 값의 출처가 갈라질 때

점검 순서

출처 이 값이 서버 데이터인지, URL인지, 브라우저 이벤트인지 구분한다.

범위 읽는 컴포넌트가 작을수록 props나 local로 남겨 둔다.

재검증 서버 값을 바꾸는 작업은 action과 revalidate를 한 쌍으로 본다.

전역화 Context/store는 여러 클라이언트 리프가 함께 읽을 때만 선택한다.