상태 관리 비교: useState vs Zustand vs Redux

상태가 컴포넌트 1개에서만 사용?
├─ Yes → useState
└─ No (여러 컴포넌트 공유)
    ├─ 부모-자식 관계 단순?
    │   ├─ Yes → props drilling 또는 context
    │   └─ No
    │       ├─ 작은 앱 + 단순 상태 → Zustand
    │       ├─ 큰 앱 + 복잡 상태 → Redux Toolkit
    │       └─ Atomic 모델 선호 → Jotai

// store/cart.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

type CartItem = { id: string; name: string; price: number; quantity: number };

type CartStore = {
  items: CartItem[];
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, qty: number) => void;
  total: () => number;
  clear: () => void;
};

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) => set((state) => {
        const existing = state.items.find(i => i.id === item.id);
        if (existing) {
          return {
            items: state.items.map(i =>
              i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
            ),
          };
        }
        return { items: [...state.items, { ...item, quantity: 1 }] };
      }),
      removeItem: (id) => set((state) => ({
        items: state.items.filter(i => i.id !== id),
      })),
      updateQuantity: (id, qty) => set((state) => ({
        items: state.items.map(i => i.id === id ? { ...i, quantity: qty } : i),
      })),
      total: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
      clear: () => set({ items: [] }),
    }),
    { name: 'cart-storage' }  // localStorage
  )
);


// 사용
function CartIcon() {
  const itemCount = useCartStore((state) => state.items.length);
  return <div>장바구니: {itemCount}</div>;
}

function CartPage() {
  const { items, removeItem, total } = useCartStore();
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.name} x {item.quantity}
          <button onClick={() => removeItem(item.id)}>제거</button>
        </div>
      ))}
      <div>총: {total()}원</div>
    </div>
  );
}

// store/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] as CartItem[] },
  reducers: {
    addItem: (state, action: PayloadAction<Omit<CartItem, 'quantity'>>) => {
      const existing = state.items.find(i => i.id === action.payload.id);
      if (existing) {
        existing.quantity += 1;
      } else {
        state.items.push({ ...action.payload, quantity: 1 });
      }
    },
    removeItem: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter(i => i.id !== action.payload);
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;


// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: { cart: cartReducer },
});


// 사용
import { useDispatch, useSelector } from 'react-redux';

function CartIcon() {
  const items = useSelector((state: RootState) => state.cart.items);
  return <div>장바구니: {items.length}</div>;
}

// atoms.ts
import { atom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';

export const itemsAtom = atomWithStorage<CartItem[]>('cart', []);

export const totalAtom = atom((get) =>
  get(itemsAtom).reduce((sum, i) => sum + i.price * i.quantity, 0)
);


// 사용
import { useAtom, useAtomValue } from 'jotai';

function Cart() {
  const [items, setItems] = useAtom(itemsAtom);
  const total = useAtomValue(totalAtom);
  // ...
}

| 라이브러리 | 번들 크기 | 학습 곡선 | 적합 |
|---|---|---|---|
| useState | 0 | ⭐ | 컴포넌트 로컬 |
| Context | 0 | ⭐⭐ | 작은 앱 + 단순 |
| Zustand | 1KB | ⭐⭐ | 중규모 + 단순 |
| Jotai | 3KB | ⭐⭐⭐ | atomic 선호 |
| Redux Toolkit | 14KB | ⭐⭐⭐⭐ | 대규모 + 복잡 |