12단계 — 서버 상태·UI 상태·로컬 데이터 분리

상태 관리 도구를 고르는 것보다 먼저 해야 할 일은 데이터의 소유자와 수명을 구분하는 것입니다. 같은 값을 URL, React state, 전역 store, 캐시에 동시에 넣으면 어느 값이 최신인지 알 수 없게 됩니다.

네 가지 상태를 먼저 나눈다

서버에서 다시 가져올 수 있는 목록을 Zustand에 복사하지 않습니다. TanStack Query의 query key는 API 자원 경계를 표현하고, mutation 성공 뒤에는 영향을 받은 key만 무효화합니다. Zustand는 여러 화면이 공유하는 작은 UI 상태에 selector를 붙여 불필요한 렌더를 줄입니다.

IndexedDB는 캐시가 아니라 데이터베이스다

IndexedDB에는 version과 migration이 필요합니다. 저장 전 용량, 만료 시각, 스키마 버전을 기록하고 읽을 때 다시 검증합니다. 브라우저가 저장 공간을 회수하거나 업그레이드가 실패해도 온라인 API로 돌아갈 수 있어야 합니다. 사용자 원본을 오직 IndexedDB에만 두지 않습니다.

읽기 경계

1

URL → query key → API 응답 → 화면

2

IndexedDB hit → 버전·만료 검증 → 화면

3

검증 실패 → 캐시 폐기 → API fallback

완료 기준

• 같은 업무 값을 두 저장소에 중복 소유하지 않는다.
• query key가 사용자·필터·페이지 경계를 포함한다.
• IndexedDB migration·용량 부족·접근 거부에서 화면이 열린다.
• 오프라인 표시와 재동기화 시점을 사용자가 이해할 수 있다.

관련 용어: Zustand, TanStack Query, IndexedDB

• 앞 단계
• 강좌 처음으로