1. Zustand Golden Usage 정리

항목	설명
Store 구성	State + Action 같이 정의한다
create<T>() 사용법	T는 전체 스토어 인터페이스 타입
set 방식	set((state) => ({ ... })) 로 immutable하게 업데이트
get 사용 여부	특별히 필요 없으면 set만 사용 (복잡한 경우에만 get 사용)
Action 설계	하나의 액션은 명확한 의미를 가지게 (ex: toggle, clear 등)
use할 때	필요한 값만 골라서 state => ({}) selector 사용하기

---

2. Zustand 기본 Template 예시

2-1. Store 인터페이스 정의

interface ExampleStore {
  count: number;
  increment: () => void;
  decrement: () => void;
}

---

2-2. Store 생성

import { create } from 'zustand';

export const useExampleStore = create<ExampleStore>((set) => ({
  // State 초기값
  count: 0,

  // Actions
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

---

3. 컴포넌트에서 사용 예시

import { useExampleStore } from '@/store/useExampleStore';

// 필요한 값만 골라서 사용하기
const { count, increment, decrement } = useExampleStore((state) => ({
  count: state.count,
  increment: state.increment,
  decrement: state.decrement,
}));

---

4. 핵심 요약

• state와 action은 명확하게 구분
• set은 항상 immutable 업데이트
• get은 특별히 필요한 경우만 사용
• use할 때는 필요한 값만 selector로 선택
• action은 의미 있는 단위로 작게 작성