Zustand persist 사용법: 새로고침 후 상태 저장하기

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

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

• 시작본 다운로드 — zustand-step-09-rerender-fix.zip
• 완료본 다운로드 — zustand-step-10-persist.zip

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

시작본에서 직접 바꾸기

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

1. src/store/useTaskStore.ts — 기존 파일의 같은 위치를 갱신합니다.

변경 이유와 결과: persist로 filter·selectedTaskId만 저장합니다. 모달·임시 입력·tasks는 저장하지 않습니다. 완료 필터 뒤 새로고침하면 필터는 유지되며 메모리 작업은 초기화됩니다.

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

src/store/useTaskStore.ts 전체 파일

import { create } from 'zustand';
import { persist } from 'zustand/middleware';


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>()(
  persist(
    (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 }),
    }),
    {
      name: 'taskflow-ui',
      partialize: (state) => ({
        filter: state.filter,
        selectedTaskId: state.selectedTaskId,
      }),
    },
  ),
);

완료 확인

1. 시작본은 직전 완료본과 동일한 ZIP입니다. 압축을 푼 뒤 npm ci로 잠금 파일의 의존성을 설치합니다.
2. npm run dev 실행 후 터미널의 localhost 주소를 엽니다.
3. persist로 filter·selectedTaskId만 저장합니다. 모달·임시 입력·tasks는 저장하지 않습니다. 완료 필터 뒤 새로고침하면 필터는 유지되며 메모리 작업은 초기화됩니다.
4. npm run typecheck와 npm run build가 성공하면 다음 프로젝트 단계로 갑니다.

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

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