2nd/10_Wiki/Topic_Programming/Coding/React_State_Library_Comparison.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
react-state-library-comparison	상태 라이브러리 비교 — Zustand / Jotai / Redux Toolkit	Coding	draft	B	conceptual	2026-05-09	2026-05-09	react state zustand jotai redux vibe-coding	language applicable_to TypeScript / React Frontend		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

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

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

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

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;

// 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 스타일)

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 (가벼운 케이스)

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