Zustand — 가벼운 상태 관리

// stores/todo-store.ts
import { create } from "zustand";

interface Todo {
  id: number;
  text: string;
  done: boolean;
}

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

export const useTodoStore = create<TodoStore>((set) => ({
  // 상태
  todos: [],

  // 액션
  addTodo: (text) => set((state) => ({
    todos: [...state.todos, {
      id: Date.now(),
      text,
      done: false,
    }],
  })),

  toggleTodo: (id) => set((state) => ({
    todos: state.todos.map(t =>
      t.id === id ? { ...t, done: !t.done } : t
    ),
  })),

  removeTodo: (id) => set((state) => ({
    todos: state.todos.filter(t => t.id !== id),
  })),
}));

// 컴포넌트에서 사용
import { useTodoStore } from "@/stores/todo-store";

function TodoList() {
  // 필요한 것만 선택적으로 구독
  const todos = useTodoStore((s) => s.todos);
  const toggleTodo = useTodoStore((s) => s.toggleTodo);

  return (
    <ul>
      {todos.map((todo) => (
        <li
          key={todo.id}
          onClick={() => toggleTodo(todo.id)}
          style={{ textDecoration: todo.done ? "line-through" : "none" }}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

function AddTodo() {
  const addTodo = useTodoStore((s) => s.addTodo);
  const [text, setText] = useState("");

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      addTodo(text);
      setText("");
    }}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">추가</button>
    </form>
  );
}