Zustand combine·immer 실습: 타입 추론과 중첩 상태 불변성

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

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

• 시작본 다운로드 — zustand-step-10-persist.zip
• 완료본 다운로드 — zustand-step-11-combine-immer.zip

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

시작본에서 직접 바꾸기

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

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

변경 이유와 결과: 기존 tasks·actions·persist를 보존한 전체 Store에 combine·immer와 preferences를 더합니다. compact·showCompleted 버튼이 표시 설정을 바꾸되 작업은 삭제하지 않습니다.

완료본의 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';
import TaskSummary from './components/TaskSummary';
import TaskPreferences from './components/TaskPreferences';

function RemainingCount() {
  const tasks = useTaskStore((state) => state.tasks);
  const remainingCount = tasks.filter((task) => !task.completed).length;
  useEffect(() => { document.title = `TaskFlow (${remainingCount})`; }, [remainingCount]);
  return <p>남은 작업: {remainingCount}</p>;
}

export default function App() {
  return (
    <main className="app">
      <Header />
      <NetworkStatus />
      <RemainingCount />
      <TaskFilter />
      <TaskForm />
      <TaskList />
      <TaskSelection />
      <TaskModalControls />
      <TaskSummary />
      <TaskPreferences />
      <StateResetDemo />
    </main>
  );
}

src/components/TaskList.tsx 전체 파일

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


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


  const preferences = useTaskStore((state) => state.preferences);
  const visibleTasks = tasks.filter((task) => {
    if (!preferences.list.showCompleted && task.completed) return false;
    if (filter === 'active') {
      return !task.completed;
    }


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


    return true;
  });


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


  return (
    <ul style={{ lineHeight: preferences.list.compact ? 1.4 : 2 }}>
      {visibleTasks.map((task) => (
        <TaskItem
          key={task.id}
          task={task}
        />
      ))}
    </ul>
  );
}

src/components/TaskPreferences.tsx 전체 파일

import { useTaskStore } from '../store/useTaskStore';
export default function TaskPreferences() {
  const compact = useTaskStore((state) => state.preferences.list.compact);
  const showCompleted = useTaskStore((state) => state.preferences.list.showCompleted);
  const toggleCompact = useTaskStore((state) => state.toggleCompact);
  const toggleShowCompleted = useTaskStore((state) => state.toggleShowCompleted);
  return (
    <section aria-label="목록 설정">
      <button onClick={toggleCompact}>간격: {compact ? '좁게' : '기본'}</button>
      <button onClick={toggleShowCompleted}>완료 항목: {showCompleted ? '표시' : '숨김'}</button>
    </section>
  );
}

src/store/useTaskStore.ts 전체 파일

import { create } from 'zustand';
import { combine, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import type { Task } from '../types/task';
export type TaskFilter = 'all' | 'active' | 'completed';
export type { Task } from '../types/task';
const initialState = {
  tasks: [] as Task[],
  filter: 'all' as TaskFilter,
  selectedTaskId: null as string | null,
  isTaskModalOpen: false,
  preferences: { list: { compact: false, showCompleted: true } },
};
const creator = persist(
  combine(initialState, immer((set) => ({
    addTask: (title: string) => {
      const value = title.trim();
      if (!value) return;
      set((state) => { state.tasks.push({ id: crypto.randomUUID(), title: value, completed: false }); });
    },
    toggleTask: (id: string) => set((state) => {
      const task = state.tasks.find((item) => item.id === id);
      if (task) task.completed = !task.completed;
    }),
    deleteTask: (id: string) => set((state) => {
      state.tasks = state.tasks.filter((task) => task.id !== id);
      if (state.selectedTaskId === id) state.selectedTaskId = null;
    }),
    selectTask: (selectedTaskId: string | null) => set({ selectedTaskId }),
    openTaskModal: () => set({ isTaskModalOpen: true }),
    closeTaskModal: () => set({ isTaskModalOpen: false }),
    setFilter: (filter: TaskFilter) => set({ filter }),
    toggleCompact: () => set((state) => { state.preferences.list.compact = !state.preferences.list.compact; }),
    toggleShowCompleted: () => set((state) => { state.preferences.list.showCompleted = !state.preferences.list.showCompleted; }),
  }))),
  {
    name: 'taskflow-ui',
    version: 0,
    partialize: (state) => ({ filter: state.filter, selectedTaskId: state.selectedTaskId, preferences: state.preferences }),
  },
);
export const useTaskStore = create(creator);

완료 확인

1. 시작본은 직전 완료본과 동일한 ZIP입니다. 압축을 푼 뒤 npm ci로 잠금 파일의 의존성을 설치합니다.
2. npm run dev 실행 후 터미널의 localhost 주소를 엽니다.
3. 기존 tasks·actions·persist를 보존한 전체 Store에 combine·immer와 preferences를 더합니다. compact·showCompleted 버튼이 표시 설정을 바꾸되 작업은 삭제하지 않습니다.
4. npm run typecheck와 npm run build가 성공하면 다음 프로젝트 단계로 갑니다.

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

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