Zustand 리렌더링 원리와 selector 최적화 방법

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

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

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

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

시작본에서 직접 바꾸기

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

1. src/App.tsx — 기존 파일의 같은 위치를 갱신합니다.
2. src/components/TaskFilter.tsx — 기존 파일의 같은 위치를 갱신합니다.

변경 이유와 결과: TaskFilter에 렌더 횟수 로그를 추가합니다. 작업 추가·완료로 filter가 변하지 않으면 Filter가 다시 렌더링되지 않는지 확인합니다.

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

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 />
      <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() {
  console.count('TaskFilter render');
  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>
  );
}

완료 확인

1. 시작본은 직전 완료본과 동일한 ZIP입니다. 압축을 푼 뒤 npm ci로 잠금 파일의 의존성을 설치합니다.
2. npm run dev 실행 후 터미널의 localhost 주소를 엽니다.
3. TaskFilter에 렌더 횟수 로그를 추가합니다. 작업 추가·완료로 filter가 변하지 않으면 Filter가 다시 렌더링되지 않는지 확인합니다.
4. npm run typecheck와 npm run build가 성공하면 다음 프로젝트 단계로 갑니다.

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

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