🐻 8. Zustand 상태관리 — Redux를 쓰다가 이걸 알게 된 순간 너무 가벼워서 깜짝 놀랐다

---

프로젝트에 상태관리를 도입할 때 가장 먼저 떠오르는 건 Redux,
하지만 너무 무겁고 세팅이 많아서 뭔가 간단한 대안이 없을까 찾다가 Zustand를 만났다.
결론부터 말하자면, 정말 가볍고 직관적인 상태관리 라이브러리였다.

---

✅ Zustand란?

독일어로 '상태(state)'라는 뜻.
Redux 창시자 Dan Abramov도 언급한 라이브러리.

• 전역 상태 관리 가능
• Context API 안 써도 됨
• 보일러플레이트 거의 없음
• immer와 devtools도 지원

---

✅ 기본 사용법

import { create } from 'zustand'

interface BearState {
  bears: number
  increase: () => void
}

const useBearStore = create<BearState>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

// 사용
function Component() {
  const bears = useBearStore((state) => state.bears);
  const increase = useBearStore((state) => state.increase);

  return <button onClick={increase}>곰이 {bears}마리 있습니다</button>;
}

---

✅ 특징 요약

항목	Zustand	Redux
설정	거의 없음	store, reducer, provider 등 필요
성능 최적화	selector로 자동 분리 리렌더링	useSelector + memo 최적화 필요
타입스크립트	기본 지원 (매우 강력함)	설정 많지만 커스텀 가능
미들웨어	devtools, persist, immer 등 선택형	redux-saga, thunk 등 외부 사용

---

✅ 언제 쓰면 좋을까?

• 페이지가 많지 않고, 상태가 복잡하지 않을 때
• 빠르게 프로토타입 만들거나 사이드 프로젝트 할 때
• 상태 공유 범위가 명확할 때

---

📝 내가 느낀 점

Zustand는 정말 "React와 함께 쓰기 위한 최소한의 상태관리 도구"라는 말이 딱 맞는 느낌이었다.
Redux를 이미 쓴 경험이 있다면 훨씬 가볍고 편한 대안이 될 수 있고,
Selector 방식 덕분에 리렌더링도 성능 측면에서 깔끔하게 컨트롤 가능하다는 점이 인상적이었다.

---

🧠 "Zustand는 ‘생각보다 강력한 작은 도구’이다."