실전 예제로 배우는 Zustand - Zustand 기초부터 아키텍쳐 설계까지 3편

Learning Zustand with Practical Examples - From Basics to Architecture Part 3

import { create } from 'zustand';
 
// 개별 '할 일' 항목에 대한 타입
export interface Todo {
  id: number;
  text: string;
  isDone: boolean;
}
 
// 스토어의 상태(State)에 대한 타입
interface TodoState {
  todos: Todo[];
}
 
// 스토어의 행동(Actions)에 대한 타입
interface TodoActions {
  addTodo: (text: string) => void;
  toggleTodo: (id: number) => void;
  removeTodo: (id: number) => void;
}
 
// create 함수로 스토어를 생성합니다.
export const useTodoStore = create<TodoState & TodoActions>((set) => ({
  // 초기 상태
  todos: [
    { id: 1, text: 'Zustand 공부하기', isDone: true },
    { id: 2, text: 'To-Do 앱 만들기', isDone: false },
  ],
 
  // 할 일을 추가하는 액션
  addTodo: (text) => 
    set((state) => ({
      todos: [
        ...state.todos,
        { id: Date.now(), text, isDone: false },
      ],
    })),
 
  // 할 일의 완료 상태를 변경하는 액션
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      ),
    })),
  
  // 할 일을 삭제하는 액션
  removeTodo: (id) =>
    set((state) => ({
      todos: state.todos.filter((todo) => todo.id !== id),
    })),
}));

import React, { useState } from 'react';
import { useTodoStore } from '../store/todoStore';
 
export function TodoInput() {
  // 입력값은 컴포넌트 내부의 지역 상태로 관리
  const [text, setText] = useState('');
  
  // 스토어에서 'addTodo' 액션만 선택하여 가져옴
  const addTodo = useTodoStore((state) => state.addTodo);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!text.trim()) return; // 비어있는 입력은 추가하지 않음
 
    addTodo(text); // 전역 스토어의 액션을 호출
    setText('');   // 입력 필드 초기화
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="새로운 할 일을 입력하세요..."
      />
      <button type="submit">추가</button>
    </form>
  );
}

import { useTodoStore, Todo } from '../store/todoStore';
import { TodoItem } from './TodoItem';
 
export function TodoList() {
  // 스토어에서 todos 배열만 선택하여 가져옴
  const todos = useTodoStore((state) => state.todos);
 
  return (
    <ul>
      {todos.map((todo: Todo) => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

import { useTodoStore, type Todo } from "../store/todoStore";
import { useShallow } from "zustand/shallow";
 
interface TodoItemProps {
  todo: Todo;
}
 
export function TodoItem({ todo }: TodoItemProps) {
  // toggleTodo와 removeTodo 두 개의 액션을 가져옴
  const { toggleTodo, removeTodo } = useTodoStore(
    useShallow((state) => ({
      toggleTodo: state.toggleTodo,
      removeTodo: state.removeTodo,
    })),
  );
 
  return (
    <li>
      <span
        onClick={() => toggleTodo(todo.id)}
        style={{ textDecoration: todo.isDone ? "line-through" : "none" }}
      >
        {todo.text}
      </span>
      <button onClick={() => removeTodo(todo.id)}>삭제</button>
    </li>
  );
}
 

// ... 기존 타입 정의
 
interface TodoState {
  todos: Todo[];
  filter: 'all' | 'done' | 'undone'; // 필터 상태 추가
}
 
interface TodoActions {
  // ... 기존 액션들
  setFilter: (filter: 'all' | 'done' | 'undone') => void; // 필터 변경 액션 추가
}
 
// ... create 함수 내부
// ... 기존 상태 및 액션들
filter: 'all',
setFilter: (newFilter) => set({ filter: newFilter }),