React 상태 배치 기준

공유해야 할 상태를 URL로 올린다

검색어와 페이지 번호처럼 새로고침과 공유가 필요한 값은 search params가 맞을 수 있다.

사용자, 주문, 게시글 같은 원본 데이터는 서버 fetch와 mutation 후 재검증 흐름으로 관리한다.

dropdown 열림, active tab, 입력 중 값처럼 브라우저 상호작용에 가까운 상태를 client에 둔다.

searchParams

공유 가능한 상태 URL에 남아 뒤로 가기와 공유 링크가 자연스럽다.

문자열 변환과 검증이 필요하다.

server state

권위 값 DB/API의 결과이며 캐시와 재검증 정책이 중요하다.

local copy와 충돌하지 않게 한다.

client state

즉시 반응 입력 중 값과 임시 UI 상태를 빠르게 반영한다.

초기 렌더링 데이터와 섞지 않는다.

context

가까운 공유 많은 형제가 공유하는 UI 상태에 쓰되 provider 범위를 좁힌다.

전역 남용을 피한다.

공유 새로고침해도 유지되어야 할 상태가 local state에만 있지 않은가.

권위 서버 데이터의 복사본을 local state로 만들어 동기화 문제를 만들지 않는가.

범위 Context provider가 필요한 화면보다 훨씬 넓게 올라가 있지 않은가.

// query/filter -> URL
// product/user/order -> server data
// modal/input draft -> local client state