상태 저장소 선정

상태 종류를 분류한다

서버에서 온 권위 데이터는 Query나 서버 캐시, UI 토글은 local state나 작은 store가 맞다.

두 컴포넌트만 공유하면 prop이나 가까운 context, 앱 전체면 store 후보가 된다.

서버 데이터 복사본을 전역 store에 넣으면 무효화와 새로고침이 어려워질 수 있다.

useState

가장 가까운 UI 상태 한 컴포넌트 또는 작은 하위 트리에서 끝나는 상태에 맞다.

먼저 고려한다.

Context

트리 범위 공유 theme, locale, 가까운 wizard 상태처럼 범위가 보이는 값에 쓴다.

잦은 변경은 리렌더 비용을 본다.

Zustand

클라이언트 전역 store 멀리 떨어진 client island가 같은 UI 상태를 공유할 때 후보가 된다.

서버 데이터 저장소로 남용하지 않는다.

Query

클라이언트 서버 상태 fetch 캐시, 재시도, refetch, optimistic update를 관리한다.

초기 서버 데이터와 hydration을 맞춘다.

권위 서버 데이터가 전역 client store에 복사되어 오래된 상태가 되지 않는가.

범위 몇 컴포넌트만 쓰는 값을 앱 전체 store에 올리지 않는가.

URL 공유와 뒤로 가기가 필요한 상태를 store에만 숨기지 않는가.

// one component -> useState
// route/shareable -> URL
// remote data -> server cache or Query
// wide client UI -> store