Zustand selector 사용법: 필요한 상태만 가져와 리렌더링 줄이기

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

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

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

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

시작본에서 직접 바꾸기

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

1. src/App.tsx — 기존 파일의 같은 위치를 갱신합니다.
2. src/components/TaskList.tsx — 기존 파일의 같은 위치를 갱신합니다.
3. src/components/TaskSummary.tsx — 이전 단계에 없던 파일을 만듭니다.

변경 이유와 결과: TaskList는 tasks와 filter만 선택하고 TaskSummary는 전체·완료 숫자를 구독합니다. 필터는 저장된 원본을 삭제하지 않고 표시만 바꿉니다.

완료본의 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';

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 />
      <TaskSummary />
      <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 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/TaskSummary.tsx 전체 파일

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


export default function TaskSummary() {
  const totalCount = useTaskStore(
    (state) => state.tasks.length,
  );


  const completedCount = useTaskStore(
    (state) =>
      state.tasks.filter(
        (task) => task.completed,
      ).length,
  );


  return (
    <p>
      전체 {totalCount}개 · 완료 {completedCount}개
    </p>
  );
}

완료 확인

1. 시작본은 직전 완료본과 동일한 ZIP입니다. 압축을 푼 뒤 npm ci로 잠금 파일의 의존성을 설치합니다.
2. npm run dev 실행 후 터미널의 localhost 주소를 엽니다.
3. TaskList는 tasks와 filter만 선택하고 TaskSummary는 전체·완료 숫자를 구독합니다. 필터는 저장된 원본을 삭제하지 않고 표시만 바꿉니다.
4. npm run typecheck와 npm run build가 성공하면 다음 프로젝트 단계로 갑니다.

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

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