State Boundary

상태 위치는 데이터의 출처와 변경 주기로 결정합니다

App Router에서는 서버 컴포넌트가 초기 데이터와 정적 UI를 맡고, 클라이언트 컴포넌트가 사용자의 입력과 전역 UI 상태를 관리합니다.

Server

요청 때 완성되는 데이터

페이지와 레이아웃에서 `async/await`로 읽고 HTML을 먼저 완성합니다. `useState`나 `useEffect`는 이 영역에 두지 않습니다.

Local

컴포넌트 안의 즉시 반응

입력값, 모달 열림, 버튼 pending처럼 화면 일부에만 필요한 값은 `useState`로 가볍게 유지합니다.

Context

낮은 빈도의 공유 값

테마, 인증 사용자, 언어처럼 여러 컴포넌트가 읽지만 자주 바뀌지 않는 값은 Provider로 공급합니다.

Query/Store

캐시와 액션 흐름

서버 상태 캐시는 TanStack Query, 복잡한 클라이언트 전역 상태는 Zustand나 Redux Toolkit이 맡기 쉽습니다.

도구를 바꿔야 하는 신호

Props drilling

전달만 하는 중간 컴포넌트가 늘어나면 Context나 Store를 봅니다.

Server cache

목록 조회, 로딩, 에러, refetch가 반복되면 Query가 어울립니다.

Frequent UI

자주 바뀌는 전역 UI 상태는 Context 전체 리렌더링을 피합니다.