Zustand action 사용법: 상태 변경 로직을 store로 분리하기

중간부터 시작하는 전체 실습 파일

기존 React Context TaskFlow의 작업 목록·추가·완료·삭제 화면을 이어서 확장합니다.

• 시작본 다운로드 — zustand-step-05-state.zip
• 완료본 다운로드 — zustand-step-06-actions.zip

이 글의 시작본은 직전 프로젝트 단계 완료본 전체입니다. 이미 직전 단계를 마쳤다면 그 폴더를 이어 쓰셔도 됩니다. Node.js 24.x와 npm을 사용하며 패키지 버전은 package-lock.json에 고정했습니다.

시작본에서 직접 바꾸기

시작본을 실행한 뒤 아래 변경 파일을 순서대로 수정합니다. 완료본의 같은 경로 파일에는 import와 입력 타입을 포함한 전체 코드가 있습니다.

1. src/App.tsx — 기존 파일의 같은 위치를 갱신합니다.
2. src/components/TaskForm.tsx — 기존 파일의 같은 위치를 갱신합니다.
3. src/components/TaskItem.tsx — 기존 파일의 같은 위치를 갱신합니다.
4. src/components/TaskList.tsx — 기존 파일의 같은 위치를 갱신합니다.
5. src/components/TaskModalControls.tsx — 기존 파일의 같은 위치를 갱신합니다.
6. src/components/TaskSelection.tsx — 기존 파일의 같은 위치를 갱신합니다.
7. src/main.tsx — 기존 파일의 같은 위치를 갱신합니다.
8. src/store/useTaskStore.ts — 기존 파일의 같은 위치를 갱신합니다.

변경 이유와 결과: 작업 원본과 add/toggle/delete를 Store로 이전합니다. main.tsx의 Provider 사용을 끝내고 App·TaskForm·TaskList·TaskItem을 함께 바꿔 두 원본이 공존하지 않게 합니다. 기존 Context 파일은 이전 단계 비교용으로 보존하지만 렌더링 경로에서는 사용하지 않습니다.

완료본의 docs/changes.patch에서 시작·완료 차이를, docs/current-step.md에서 파일별 적용 위치를 확인할 수 있습니다. 아래 전체 파일을 같은 경로에 반영한 다음 실행하세요.

src/App.tsx 전체 파일

import { useEffect } from 'react';
import Header from './components/Header';
import NetworkStatus from './components/NetworkStatus';
import StateResetDemo from './components/StateResetDemo';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import TaskFilter from './components/TaskFilter';
import { useTaskStore } from './store/useTaskStore';
import TaskSelection from './components/TaskSelection';
import TaskModalControls from './components/TaskModalControls';

export default function App() {
  const tasks = useTaskStore((state) => state.tasks);
  const remainingCount = tasks.filter((task) => !task.completed).length;
  useEffect(() => { document.title = `TaskFlow (${remainingCount})`; }, [remainingCount]);
  return (
    <main className="app">
      <Header />
      <NetworkStatus />
      <p>남은 작업: {remainingCount}</p>
      <TaskFilter />
      <TaskForm />
      <TaskList />
      <TaskSelection />
      <TaskModalControls />
      <StateResetDemo />
    </main>
  );
}

src/components/TaskForm.tsx 전체 파일

import { useState } from 'react';
import { useTaskStore } from '../store/useTaskStore';


export default function TaskForm() {
  const [title, setTitle] = useState('');
  const addTask = useTaskStore(
    (state) => state.addTask,
  );


  const handleSubmit = (
    event: React.FormEvent<HTMLFormElement>,
  ) => {
    event.preventDefault();


    const value = title.trim();
    if (!value) return;


    addTask(value);
    setTitle('');
  };


  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="task-title">새 작업</label>
      <input
        id="task-title"
        value={title}
        onChange={(event) =>
          setTitle(event.target.value)
        }
      />
      <button type="submit">추가</button>
    </form>
  );
}

src/components/TaskItem.tsx 전체 파일

import {
  useTaskStore,
  type Task,
} from '../store/useTaskStore';


type TaskItemProps = {
  task: Task;
};


export default function TaskItem({
  task,
}: TaskItemProps) {
  const toggleTask = useTaskStore(
    (state) => state.toggleTask,
  );
  const deleteTask = useTaskStore(
    (state) => state.deleteTask,
  );


  return (
    <li>
      <button
        type="button"
        onClick={() => toggleTask(task.id)}
      >
        {task.completed ? '완료 취소' : '완료'}
      </button>


      <span>{task.title}</span>


      <button
        type="button"
        onClick={() => deleteTask(task.id)}
      >
        삭제
      </button>
    </li>
  );
}

src/components/TaskList.tsx 전체 파일

import { useTaskStore } from '../store/useTaskStore';
import TaskItem from './TaskItem';


export default function TaskList() {
  const { tasks } = useTaskStore();
  const filter = useTaskStore(
    (state) => state.filter,
  );


  const visibleTasks = tasks.filter((task) => {
    if (filter === 'active') {
      return !task.completed;
    }


    if (filter === 'completed') {
      return task.completed;
    }


    return true;
  });


  if (visibleTasks.length === 0) {
    return <p>표시할 작업이 없습니다.</p>;
  }


  return (
    <ul>
      {visibleTasks.map((task) => (
        <TaskItem
          key={task.id}
          task={task}
        />
      ))}
    </ul>
  );
}

src/components/TaskModalControls.tsx 전체 파일

import { useTaskStore } from '../store/useTaskStore';


export default function TaskModalControls() {
  const isOpen = useTaskStore(
    (state) => state.isTaskModalOpen,
  );
  const open = useTaskStore((state) => state.openTaskModal);
  const close = useTaskStore((state) => state.closeTaskModal);


  return (
    <section>
      <h2>모달 상태</h2>
      <p>{isOpen ? '열림' : '닫힘'}</p>


      <button
        type="button"
        onClick={() => open()}
      >
        열기
      </button>


      <button
        type="button"
        onClick={() => close()}
      >
        닫기
      </button>
    </section>
  );
}

src/components/TaskSelection.tsx 전체 파일

import { useTaskStore } from '../store/useTaskStore';


export default function TaskSelection() {
  const selectedTaskId = useTaskStore(
    (state) => state.selectedTaskId,
  );
  const selectTask = useTaskStore(
    (state) => state.selectTask,
  );


  return (
    <section>
      <h2>선택 상태</h2>
      <p>선택한 작업: {selectedTaskId ?? '없음'}</p>


      <button
        type="button"
        onClick={() => selectTask('example-task')}
      >
        예제 작업 선택
      </button>


      <button
        type="button"
        onClick={() => selectTask(null)}
      >
        선택 해제
      </button>
    </section>
  );
}

src/main.tsx 전체 파일

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App />
  </StrictMode>,
);

src/store/useTaskStore.ts 전체 파일

import { create } from 'zustand';


export type Task = {
  id: string;
  title: string;
  completed: boolean;
};


export type TaskFilter =
  | 'all'
  | 'active'
  | 'completed';


type TaskStore = {
  tasks: Task[];
  filter: TaskFilter;
  selectedTaskId: string | null;
  isTaskModalOpen: boolean;


  addTask: (title: string) => void;
  toggleTask: (id: string) => void;
  deleteTask: (id: string) => void;
  selectTask: (id: string | null) => void;
  openTaskModal: () => void;
  closeTaskModal: () => void;
  setFilter: (filter: TaskFilter) => void;
};


export const useTaskStore = create<TaskStore>((set) => ({
  tasks: [],
  filter: 'all',
  selectedTaskId: null,
  isTaskModalOpen: false,


  addTask: (title) =>
    set((state) => ({
      tasks: [
        ...state.tasks,
        {
          id: crypto.randomUUID(),
          title,
          completed: false,
        },
      ],
    })),


  toggleTask: (id) =>
    set((state) => ({
      tasks: state.tasks.map((task) =>
        task.id === id
          ? { ...task, completed: !task.completed }
          : task,
      ),
    })),


  deleteTask: (id) =>
    set((state) => ({
      tasks: state.tasks.filter(
        (task) => task.id !== id,
      ),
    })),


  selectTask: (selectedTaskId) =>
    set({ selectedTaskId }),


  openTaskModal: () =>
    set({ isTaskModalOpen: true }),


  closeTaskModal: () =>
    set({ isTaskModalOpen: false }),


  setFilter: (filter) => set({ filter }),
}));

완료 확인

1. 시작본은 직전 완료본과 동일한 ZIP입니다. 압축을 푼 뒤 npm ci로 잠금 파일의 의존성을 설치합니다.
2. npm run dev 실행 후 터미널의 localhost 주소를 엽니다.
3. 작업 원본과 add/toggle/delete를 Store로 이전합니다. main.tsx의 Provider 사용을 끝내고 App·TaskForm·TaskList·TaskItem을 함께 바꿔 두 원본이 공존하지 않게 합니다. 기존 Context 파일은 이전 단계 비교용으로 보존하지만 렌더링 경로에서는 사용하지 않습니다.
4. npm run typecheck와 npm run build가 성공하면 다음 프로젝트 단계로 갑니다.

이 체크포인트는 TypeScript 검사·프로덕션 빌드와 실제 소스를 사용한 JSDOM/상태 시나리오 검증을 통과했습니다. 별도 실제 브라우저 화면 검수는 이 파일 검증 범위에 포함하지 않았습니다.

아래 부분 예제는 핵심 변경을 설명합니다. 실행에 필요한 전체 파일과 보조 타입·API는 위 완료본에서 확인하세요.