Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기

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

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

• 시작본 다운로드 — zustand-step-03-store-design.zip
• 완료본 다운로드 — zustand-step-04-install.zip

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

시작본에서 직접 바꾸기

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

1. package-lock.json — 기존 파일의 같은 위치를 갱신합니다.
2. package.json — 기존 파일의 같은 위치를 갱신합니다.
3. src/App.tsx — 기존 파일의 같은 위치를 갱신합니다.
4. src/components/TaskFilter.tsx — 이전 단계에 없던 파일을 만듭니다.
5. src/components/TaskList.tsx — 기존 파일의 같은 위치를 갱신합니다.
6. src/store/useTaskStore.ts — 이전 단계에 없던 파일을 만듭니다.

변경 이유와 결과: Zustand와 useTaskStore·TaskFilter를 추가합니다. filter는 Zustand, tasks와 dispatch는 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 { useTaskContext } from './context/TaskContext';

export default function App() {
  const { tasks } = useTaskContext();
  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 />
      <StateResetDemo />
    </main>
  );
}

src/components/TaskFilter.tsx 전체 파일

import {
  useTaskStore,
  type TaskFilter as TaskFilterValue,
} from '../store/useTaskStore';


const options: TaskFilterValue[] = [
  'all',
  'active',
  'completed',
];


export default function TaskFilter() {
  const filter = useTaskStore((state) => state.filter);
  const setFilter = useTaskStore((state) => state.setFilter);


  return (
    <section>
      <h2>필터</h2>
      <select
        value={filter}
        onChange={(event) =>
          setFilter(event.target.value as TaskFilterValue)
        }
      >
        {options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))}
      </select>
    </section>
  );
}

src/components/TaskList.tsx 전체 파일

import { useTaskContext } from '../context/TaskContext';
import { useTaskStore } from '../store/useTaskStore';
import TaskItem from './TaskItem';

export default function TaskList() {
  const { tasks: allTasks } = useTaskContext();
  const filter = useTaskStore((state) => state.filter);
  const tasks = allTasks.filter((task) => filter === 'all' || (filter === 'completed' ? task.completed : !task.completed));

  if (tasks.length === 0) {
    return <p>등록된 작업이 없습니다.</p>;
  }

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

src/store/useTaskStore.ts 전체 파일

import { create } from 'zustand';


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


type TaskStore = {
  filter: TaskFilter;
  setFilter: (filter: TaskFilter) => void;
};


export const useTaskStore = create<TaskStore>((set) => ({
  filter: 'all',
  setFilter: (filter) => set({ filter }),
}));

완료 확인

1. 시작본은 직전 완료본과 동일한 ZIP입니다. 압축을 푼 뒤 npm ci로 잠금 파일의 의존성을 설치합니다.
2. npm run dev 실행 후 터미널의 localhost 주소를 엽니다.
3. Zustand와 useTaskStore·TaskFilter를 추가합니다. filter는 Zustand, tasks와 dispatch는 Context에 남습니다. 필터 표시가 바뀌고 목록도 선택 조건을 따릅니다.
4. npm run typecheck와 npm run build가 성공하면 다음 프로젝트 단계로 갑니다.

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

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