각 state 조각이 어디에 있어야 할지 어떻게 결정하나요?

Question

Accepted Answer

**state가 어디에 살지** 결정하는 것은 가장 중요한 아키텍처 기술 중 하나입니다. 지침 원칙: 각 state 조각을, 그것이 필요한 모든 곳을 여전히 만족시키는 **가장 좁은 범위**에 두고 — 각 *종류*의 state를 올바른 도구에 맞추세요.

## 결정 프레임워크

```text
1. 누가 이 state를 필요로 하는가?
   - 하나의 컴포넌트                  → local state(useState)
   - 몇 개의 관련 컴포넌트             → 공통 부모로 끌어올림 / 작은 context
   - 멀리 떨어진 많은 컴포넌트          → 글로벌 store 또는 context

2. 어떤 종류의 state인가?
   - 서버/원격 데이터                 → server-state 라이브러리(React Query/SWR)
   - UI/클라이언트 state              → useState / Zustand / Redux
   - URL로 파생 가능(필터, 페이지)     → URL(searchParams)
   - 폼 입력                          → 폼 라이브러리 또는 local state

3. 얼마나 자주 변하는가?
   - 드물게, 널리 공유(테마)           → Context면 충분
   - 자주, 널리 공유                  → 선택적 구독을 가진 store
```

## 분류와 각자의 집

```text
state 종류     사는 곳                         예시
─────────────────────────────────────────────────────────────────
Local UI       컴포넌트(useState)              입력 텍스트, isOpen, hover
Shared UI      끌어올린 부모 / Context / store  모달 state, 선택된 항목
Server data    React Query / SWR / RTK Query   users, products(캐시된 원격)
URL state      라우터 / searchParams           필터, 페이지, 검색어, 탭
Form state     React Hook Form / local          필드 값, 검증
Global app     Zustand / Redux / Context       인증 user, 테마, cart
```

## 프레임워크가 막아주는 흔한 실수

```text
❌ 서버 데이터를 Redux에       → React Query 사용(캐시이지 UI state 아님)
❌ "혹시 몰라" 모든 것을 글로벌 → 과결합, 추가 리렌더링; local로 유지
❌ 필터/페이지를 state에        → URL에 두기(공유 가능, 북마크 가능, 뒤로 가기)
❌ 파생 가능한 값을 중복        → 대신 파생(single source of truth)
❌ 폼 state를 글로벌 store에    → 보통 과함; local로 유지하거나 폼 라이브러리 사용
```

## URL은 활용도가 낮은 state

```text
필터, 페이지네이션, 검색, 활성 탭 → URL에 속함.
이점: 공유 가능한 링크, 브라우저 뒤로/앞으로 작동, 새로고침에도 살아남음, SEO.
```

## 왜 중요한가

state가 어디에 사는지가 앱의 단순성, 성능, 유지보수성을 결정합니다.

이 기술은 모든 것을 글로벌로 만들려는 충동을 억누르고 대신 **기본은 local로, 각 종류의 state를 적절한 도구에 맞추는 것**입니다(서버 데이터 → React Query, URL 파생 가능 → URL, UI → local/store).

이를 올바르게 하면 가장 흔한 아키텍처 문제를 피할 수 있습니다 — 서버 데이터를 Redux에 욱여넣기, 과도하게 글로벌화된 state가 리렌더링을 유발하기, 필터를 URL 대신 컴포넌트 state에 두기.

이 판단이 깔끔하고 확장 가능한 state 아키텍처와 뒤엉킨 것을 가르는 차이입니다.