상태관리 라이브러리 Zustand의 기본 개념과 기능

 

🐻 Zustand, 뭐하는 친구야?

안녕하세요! 리액트를 사용하다 보면 상태 관리를 고민하게 되죠?
Context API, Redux… 복잡하다고 느끼셨다면 ✋
“작고, 빠르고, 정말 간단한 상태관리 라이브러리” → Zustand를 소개합니다!

---

✅ Zustand는 이런 라이브러리예요

• 가볍고 빠른 상태관리
• Redux보다 훨씬 코드가 짧고 심플
• Context API 없이도 전역 상태를 공유할 수 있음
• React 전용, TypeScript도 잘 지원

---

💡 언제 써야 할까?

• 여러 컴포넌트에서 전역 상태를 공유해야 할 때
• 로그인 상태, 다크모드, 장바구니, 토글 상태 등을 관리할 때
• Context API가 불편하거나 깊은 구조에서 쓰기 힘들 때

---

🛠️ 자주 쓰는 명령어/기능

명령어/기능 설명

create()	상태 스토어 생성 함수 (Zustand의 핵심)
set()	상태를 변경할 때 사용
get()	현재 상태 가져오기
subscribe()	상태 변화 감지하기
persist	상태를 localStorage에 저장 (옵션)

---

🧪 예제: 다크모드 토글 (React 기준)

1. 상태 저장소 만들기 (store/darkModeStore.js)

import { create } from 'zustand';

export const useDarkModeStore = create((set) => ({
  isDark: false,
  toggleDark: () => set((state) => ({ isDark: !state.isDark })),
}));

2. 컴포넌트에서 사용하기

import { useDarkModeStore } from '@/store/darkModeStore';

export default function ThemeToggle() {
  const { isDark, toggleDark } = useDarkModeStore();
  return <button onClick={toggleDark}>{isDark ? '🌙 다크모드' : '☀️ 라이트모드'}</button>;
}

---

🔁 상태를 여러 컴포넌트에서 쉽게 공유

다른 컴포넌트에서도 useDarkModeStore()만 호출하면
같은 전역 상태를 바로 사용할 수 있어요! 🎯

---

🧠 요약 정리

항목 설명

특징	빠름, 간단함, Context 불필요
기본 함수	create(), set(), get() 등
적합한 상황	로그인, 테마, 전역 UI 상태 등
장점	코드량 적고, Redux보다 가벼움

---

✅ 마무리 한마디

Zustand는 정말 가볍고 쓰기 쉬운 전역 상태관리 도구입니다.
Redux가 부담스럽거나 Context API가 불편하셨다면,
Zustand로 마음 편하게 상태관리 시작해보세요! 😊