React 상태는 범위와 소유자에 따라 저장소를 고른다
모든 상태를 전역 store에 넣기보다 local, shared, server, derived 상태를 분리해야 흐름이 단순해진다.
| 상태 범위 | 예시 | 좋은 저장 위치 | 피해야 할 것 |
|---|---|---|---|
| Local UI | 모달 열림, 입력 중 값 | useState, useReducer | 전역 store에 불필요하게 저장 |
| Shared Client | 인증 사용자, 장바구니 | Zustand, Redux, Context | props drilling으로 깊게 전달 |
| Server Cache | API에서 온 목록과 상세 | React Query 같은 캐시 도구 | 로딩·재검증을 직접 전역 상태로 관리 |
| Derived View | 필터 결과, 합계, 정렬 결과 | 렌더 중 계산 또는 memo | 원본과 파생값을 둘 다 저장 |
전역 store는 공유가 확실한 값에만 쓰고 서버 데이터는 전용 캐시 도구와 역할을 나누면 좋다.