🐻 Zustand 예제

간단하고 직관적인 상태 관리 라이브러리

📦 패키지 설치 필요

npm install zustand

현재는 로컬 상태로 구현되어 있습니다. 패키지 설치 후 코드 주석을 해제하세요.

✨ Zustand의 핵심 특징

• Provider 불필요: 별도의 Provider 래핑 없이 바로 사용
• 간단한 API: create 함수로 스토어 생성
• 미들웨어 지원: devtools, persist 등 내장
• 작은 번들: ~3KB (gzipped)
• React 외부 사용: 컴포넌트 밖에서도 스토어 접근 가능

📝 Todo App 데모

할 일이 없습니다

전체

진행 중

완료

💻 코드 예제

// Zustand Store 정의
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface TodoStore {
  todos: Todo[];
  addTodo: (text: string) => void;
  toggleTodo: (id: number) => void;
  removeTodo: (id: number) => void;
}

const useTodoStore = create<TodoStore>()(
  devtools(
    persist(
      (set) => ({
        todos: [],
        addTodo: (text) =>
          set((state) => ({
            todos: [...state.todos, 
              { id: Date.now(), text, completed: false }
            ],
          })),
        toggleTodo: (id) =>
          set((state) => ({
            todos: state.todos.map((todo) =>
              todo.id === id 
                ? { ...todo, completed: !todo.completed } 
                : todo
            ),
          })),
        removeTodo: (id) =>
          set((state) => ({
            todos: state.todos.filter((todo) => todo.id !== id),
          })),
      }),
      { name: 'zustand-todos' }
    )
  )
);

// 컴포넌트에서 사용
function TodoList() {
  const { todos, addTodo, toggleTodo } = useTodoStore();
  
  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

✅ 장점

• 매우 간단한 API와 러닝 커브
• Provider 래핑 불필요
• 작은 번들 사이즈 (~3KB)
• TypeScript 완벽 지원
• 미들웨어 시스템 (devtools, persist)
• React 외부에서도 사용 가능

⚠️ 단점

• 비동기 처리는 수동으로 구현
• 파생 상태는 수동으로 계산
• Recoil/Jotai보다 React 통합이 덜 긴밀함
• 큰 프로젝트에서는 구조화 필요