🐻 25. Zustand 상태관리 복습 — 1부터 100까지 설명할 수 있도록

---

프론트엔드 상태 관리 도구는 정말 많다.
그 중에서도 최근 들어 React에서 가장 핫한 경량 상태 관리 도구가 바로 Zustand이다.

이번 글은 Zustand를 처음 들어보는 사람도 개념부터 실전까지 바로 따라올 수 있게
완전 기초부터 실습 코드, 장단점, 사용 팁까지 정리해봤다.

---

✅ Zustand란?

독일어로 "상태(state)"라는 뜻이고,
"가볍고 직관적인 상태 관리 라이브러리"

• Redux보다 훨씬 간단하고 코드량이 적다
• Context 없이도 전역 상태 공유가 가능
• 불필요한 리렌더링도 자동으로 방지해줌

📦 설치 방법:

npm install zustand
# 또는
yarn add zustand

---

⚙️ 기본 사용 방법

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

type State = {
  count: number;
  increase: () => void;
  decrease: () => void;
};

export const useCounterStore = create<State>((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

// App.tsx
import { useCounterStore } from './store';

export default function App() {
  const { count, increase, decrease } = useCounterStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>+1</button>
      <button onClick={decrease}>-1</button>
    </div>
  );
}

💡 useCounterStore() 훅만 불러서 어디서든 상태를 공유할 수 있다.
Context, Provider 전혀 필요 없음!

---

🧠 상태 구독 최적화 (select 사용)

const count = useCounterStore((state) => state.count);

• 특정 상태만 구독해서 불필요한 리렌더링 방지 가능
• 기존 Redux의 useSelector와 비슷하지만 훨씬 가볍고 자유롭다

---

🧪 여러 store를 분리하고 싶을 땐?

// userStore.ts
export const useUserStore = create(() => ({
  name: 'unknown',
  setName: (name: string) => set({ name }),
}));

// uiStore.ts
export const useUIStore = create(() => ({
  isModalOpen: false,
  toggleModal: () => set((s) => ({ isModalOpen: !s.isModalOpen })),
}));

• 관심사별로 스토어를 나눠서 관리 가능
• 프로젝트 규모가 커져도 상태 분리가 쉬움

---

🧩 Redux와 비교해보면?

항목	Redux	Zustand
코드량	많음	적음 (Hooks 기반)
보일러플레이트	많음 (action, reducer 등)	거의 없음
리렌더링 관리	직접 memoization 필요	자동으로 최소화함
Provider 필요	있음	❌ 필요 없음
TypeScript 지원	O	O (타입 추론도 뛰어남)

---

🎯 언제 Zustand를 선택하면 좋을까?

• Redux는 너무 무겁고 복잡하다고 느껴질 때
• Context로는 상태 관리가 어렵거나 반복될 때
• 빠르게 프로토타입을 만들거나 작은 프로젝트일 때
• 게임, 대시보드, 소켓 상태 등 빠른 상태 변화 관리가 필요할 때

---

📝 내가 느낀 점

Zustand는 Redux처럼 "어렵게 배우고 써야 한다"는 느낌이 아니라
"Hook처럼 자연스럽게 써지는데, 전역 상태가 된다"는 점이 너무 좋았다.
특히 상태 구독 최적화가 잘 돼서, 리렌더링 성능 이슈도 거의 없었다.

지금은 거의 모든 프로젝트에서 기본 상태 관리는 Zustand로 사용 중이다.

---

🐾 “상태 관리가 무겁고 복잡하다고 느껴졌다면,
Zustand는 한 번쯤 꼭 써볼만한 대안이다.”