[G1-Sync] Manual knowledge update

10_Wiki/Topics/Coding/React_State_Library_Comparison.md

@@ -0,0 +1,162 @@
+---
+id: react-state-library-comparison
+title: 상태 라이브러리 비교 — Zustand / Jotai / Redux Toolkit
+category: Coding
+status: draft
+source_trust_level: B
+verification_status: conceptual
+created_at: 2026-05-09
+updated_at: 2026-05-09
+tags: [react, state, zustand, jotai, redux, vibe-coding]
+tech_stack: { language: "TypeScript / React", applicable_to: ["Frontend"] }
+applied_in: []
+aliases: [Zustand, Jotai, Redux Toolkit, Valtio, state management, store]
+---
+
+# 상태 라이브러리 비교
+
+> Server state = TanStack Query. **Client-only UI state** = Zustand 디폴트, 원자 단위 derive 많으면 Jotai, 큰 팀 + DevTools = Redux Toolkit. Context = 가벼운 prop drilling 만.
+
+## 📖 핵심 개념
+- Zustand: 단일 store, hook 기반, 가장 간단.
+- Jotai: 원자 단위, derive (computed) 강력.
+- Redux Toolkit: 전통, slice/reducer/devtools.
+- Valtio: proxy mutate 스타일.
+- Context: React 내장, re-render 비용 큼.
+
+## 💻 코드 패턴
+
+### Zustand
+```ts
+import { create } from 'zustand';
+
+interface CartStore {
+  items: Item[];
+  add: (i: Item) => void;
+  remove: (id: string) => void;
+  total: () => number;
+}
+
+export const useCart = create<CartStore>((set, get) => ({
+  items: [],
+  add: (i) => set(s => ({ items: [...s.items, i] })),
+  remove: (id) => set(s => ({ items: s.items.filter(x => x.id !== id) })),
+  total: () => get().items.reduce((s, i) => s + i.price, 0),
+}));
+
+// 사용
+const items = useCart(s => s.items); // selective subscribe
+const add = useCart(s => s.add);
+```
+
+### Zustand + persist
+```ts
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+const useAuth = create(persist<AuthStore>(
+  (set) => ({ token: null, login: (t) => set({ token: t }) }),
+  { name: 'auth', storage: createJSONStorage(() => localStorage) }
+));
+```
+
+### Jotai
+```ts
+import { atom, useAtom, useAtomValue } from 'jotai';
+
+const cartAtom = atom<Item[]>([]);
+const totalAtom = atom((get) => get(cartAtom).reduce((s, i) => s + i.price, 0));
+
+function Cart() {
+  const [items, setItems] = useAtom(cartAtom);
+  const total = useAtomValue(totalAtom); // 자동 derive
+  return <p>{items.length} items, {total}</p>;
+}
+```
+
+### Redux Toolkit
+```ts
+import { createSlice, configureStore } from '@reduxjs/toolkit';
+
+const cart = createSlice({
+  name: 'cart',
+  initialState: { items: [] as Item[] },
+  reducers: {
+    add: (s, a: PayloadAction<Item>) => { s.items.push(a.payload); },
+    remove: (s, a: PayloadAction<string>) => {
+      s.items = s.items.filter(x => x.id !== a.payload);
+    },
+  },
+});
+
+export const store = configureStore({ reducer: { cart: cart.reducer } });
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+```
+
+```tsx
+// hooks.ts
+import { useDispatch, useSelector } from 'react-redux';
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+
+// component
+const items = useAppSelector(s => s.cart.items);
+const dispatch = useAppDispatch();
+dispatch(cart.actions.add(item));
+```
+
+### Valtio (mutate 스타일)
+```ts
+import { proxy, useSnapshot } from 'valtio';
+
+const state = proxy({ count: 0 });
+state.count++;  // OK
+
+function Counter() {
+  const snap = useSnapshot(state);
+  return <p>{snap.count}</p>;
+}
+```
+
+### Context (가벼운 케이스)
+```tsx
+const Theme = createContext<'light' | 'dark'>('light');
+
+function App() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  return <Theme.Provider value={theme}><Page /></Theme.Provider>;
+}
+```
+
+⚠️ value 가 자주 바뀌면 모든 consumer 재렌더 → Zustand/Jotai 가 나음.
+
+## 🤔 의사결정 기준
+| 상황 | 추천 |
+|---|---|
+| Server data | TanStack Query |
+| 작은 UI state (toggle, modal) | useState |
+| 글로벌 client state | Zustand |
+| Computed state 많음 | Jotai |
+| 큰 팀 / DevTools / time-travel | Redux Toolkit |
+| Mutate 친화 | Valtio |
+| Provider tree 만 | Context |
+| RSC + Next 14 | useState + URL state + Query |
+
+## ❌ 안티패턴
+- **모든 state 글로벌**: 컴포넌트 캡슐화 깨짐. 가능한 local.
+- **Server data 를 Zustand 에 복사**: 동기화 지옥. Query 만.
+- **Context 자주 변경**: 모든 자식 재렌더.
+- **Redux 한 슬라이스 안 큰 객체 매 변경**: 모든 selector 재계산.
+- **Persist 모든 store**: 비밀 / 임시 까지 저장.
+- **Selector 안에 객체 새로 만듦**: 매번 새 reference — re-render. shallow 또는 reselect.
+- **Selectors 간 derive 깊음**: Jotai / reselect.
+
+## 🤖 LLM 활용 힌트
+- Server = Query, Client = Zustand 디폴트.
+- Computed 필요 시 Jotai.
+- Devtools 강력 = Redux Toolkit.
+
+## 🔗 관련 문서
+- [[React_TanStack_Query_Advanced]]
+- [[React_Context_API_Misuse]]
+- [[State_Management_Architecture]]