React에서 상태 관리 방식을 어떻게 선택하나요?

Question

Accepted Answer

기본적으로 전역 store에 손을 뻗기보다는, state의 **종류**에 도구를 맞추세요. 대부분의 "전역 상태" 문제는 사실 잘못된 도구 선택입니다.

## 결정 가이드

```text
로컬 UI state (토글, 입력)             → useState / useReducer
공유, 저빈도 (테마, 사용자)             → Context
서버/API 데이터                       → React Query / SWR  (전역 store 아님)
복잡한 전역 client state               → Zustand / Jotai / Redux Toolkit
URL 공유 가능 state (필터, 페이지)       → URL (search params)
```

## 가장 중요한 통찰: 서버 상태 ≠ client 상태

API에서 온 데이터는 여러분이 소유하는 state가 아니라 원격 데이터의 **캐시**입니다. 이를 Redux에 넣으면 로딩, 캐싱, refetch, 무효화를 수동으로 처리해야 합니다 — 고통스럽고 버그가 많습니다. 서버 상태 라이브러리는 그 모든 것을 합니다:

```jsx
// 캐싱, 중복 제거, 백그라운드 refetch, stale-while-revalidate를 무료로 처리
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## 지침

- state는 가능한 한 **로컬**하게 유지하세요. 사용되는 곳 가까이에 두세요(colocate).
- 빠르게 변하는 값을 **Context**에 넣지 마세요(모든 소비자를 re-render합니다).
- 자주 업데이트되는 공유 client state에는 **선택적 구독**을 지원하는 store(Zustand/Jotai)를 선호하여, 컴포넌트가 자신이 읽는 조각에 대해서만 re-render되도록 하세요.
- 진정으로 복잡한 공유 state에 devtools/미들웨어/구조가 필요할 때 Redux Toolkit에 손을 뻗으세요.

진짜 기술은 라이브러리를 고르는 것이 아니라 state를 **최소화하고 올바르게 배치하는** 것입니다.