Zustand 상태 변경 후 리렌더링이 안 될 때 해결 방법

import { create } from 'zustand';
type Task = { id: number; completed: boolean };
type State = { tasks: Task[]; broken: () => void; fixed: () => void; reset: () => void };
const useDemo = create<State>()((set) => ({
  tasks: [{ id: 1, completed: false }],
  broken: () => set((state) => {
    state.tasks[0].completed = true;
    return { tasks: state.tasks };
  }),
  fixed: () => set((state) => ({
    tasks: state.tasks.map((task) => ({ ...task, completed: true })),
  })),
  reset: () => set({ tasks: [{ id: 1, completed: false }] }),
}));
export default function App() {
  const tasks = useDemo((state) => state.tasks);
  const broken = useDemo((state) => state.broken);
  const fixed = useDemo((state) => state.fixed);
  const reset = useDemo((state) => state.reset);
  return (
    <main>
      <p>완료: {String(tasks[0].completed)}</p>
      <button onClick={broken}>잘못된 변경</button>
      <button onClick={reset}>초기 상태</button>
      <button onClick={fixed}>새 참조로 변경</button>
    </main>
  );
}

npm run dev
npm run build

가장 먼저 확인할 것

다음 코드처럼 기존 배열을 직접 수정하고 같은 참조를 반환하면 문제가 생길 수 있습니다.

toggleTaskBroken: (id) =>
  set((state) => {
    const task = state.tasks.find(
      (item) => item.id === id,
    );


    if (task) {
      task.completed = !task.completed;
    }


    return {
      tasks: state.tasks,
    };
  }),

state.tasks는 이전과 같은 배열입니다.

새 참조로 변경

toggleTask: (id) =>
  set((state) => ({
    tasks: state.tasks.map((task) =>
      task.id === id
        ? {
            ...task,
            completed: !task.completed,
          }
        : task,
    ),
  })),

배열과 변경된 task 객체의 참조가 새로 만들어집니다.

selector가 다른 값을 보고 있는 경우

store state는 바뀌었는데 컴포넌트가 해당 값을 구독하지 않을 수도 있습니다.

const taskCount = useTaskStore(
  (state) => state.tasks.length,
);

완료 여부만 바꾸면 배열 길이는 그대로입니다.

따라서 taskCount selector 결과도 그대로입니다.

이 컴포넌트가 완료 개수까지 보여줘야 한다면 필요한 값을 선택해야 합니다.

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

파생 배열 selector

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

filter는 새 배열을 반환합니다. 위 selector는 이 참조 문제를 보여주는 예이며 Zustand 5의 기본 create에서는 무한 업데이트가 발생할 수 있습니다. tasks의 기존 배열 참조를 선택한 뒤 화면에서 계산하거나 useShallow로 얕게 같은 결과를 재사용하는 방향을 확인하세요. 공식 useShallow 오류 설명은 이 문제를 다룹니다.

필요하다면 tasks 자체를 구독한 뒤 렌더 내부에서 계산하거나 비교 전략을 별도로 적용합니다.

진단 순서

화면이 바뀌지 않을 때 다음 순서로 확인합니다.

1. action이 실제 호출되는가
2. set이 실행되는가
3. 변경된 state 값이 맞는가
4. 객체·배열 참조가 바뀌었는가
5. 컴포넌트 selector가 해당 값을 구독하는가
6. selector 결과가 의도한 비교 단위를 반환하는가

console.log를 임시로 넣어 확인할 수 있습니다.

toggleTask: (id) =>
  set((state) => {
    const nextTasks = state.tasks.map(
      (task) =>
        task.id === id
          ? {
              ...task,
              completed: !task.completed,
            }
          : task,
    );


    console.log({
      before: state.tasks,
      after: nextTasks,
    });


    return { tasks: nextTasks };
  }),

확인 후 디버그 로그는 제거합니다.

학습 완료 체크리스트

• mutation과 불변 업데이트 차이를 설명할 수 있습니다.
• selector가 실제 변경 값을 구독하는지 확인할 수 있습니다.
• 배열 길이처럼 변화하지 않는 파생 값을 잘못 구독하는 문제를 찾을 수 있습니다.
• 리렌더링 문제를 단계별로 진단할 수 있습니다.

# 참조 변경 비교

잘못된 예: task.completed를 직접 바꾸고 같은 tasks 배열을 set하면 tasks를 구독한 화면이 갱신되지 않을 수 있습니다.
완료본은 map으로 새 배열·변경한 task 객체를 반환하는 toggleTask를 유지합니다.
작업 두 개 추가 → 첫 작업 완료 → 전체 2·완료 1 → 완료 필터에서 첫 작업만 보이는지 확인합니다.

zustand-step-08-rerender

toggleTask: (id) =>
  set((state) => {
    const task = state.tasks.find(
      (item) => item.id === id,
    );


    if (task) {
      task.completed = !task.completed;
    }


    return {
      tasks: state.tasks,
    };
  }),

toggleTask: (id) =>
  set((state) => ({
    tasks: state.tasks.map((task) =>
      task.id === id
        ? {
            ...task,
            completed: !task.completed,
          }
        : task,
    ),
  })),

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


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


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


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

Before
같은 배열 참조 재사용
화면 갱신 기준이 불명확


After
새 배열과 새 객체 생성
변경되는 값을 selector로 구독

npm run build

✓ 1~8. Store·selector·측정
→ 9. 리렌더링 오류 해결
○ 10. persist
○ 11~15. middleware·migration·실무 설계

zustand-step-09-rerender-fix

다음 학습

다음 글에서는 새로고침 후에도 유지할 가치가 있는 상태만 persist middleware로 저장합니다.

다음 프로젝트 단계: Zustand persist 사용법: 새로고침 후 상태 저장하기

공식 문서

• Zustand 공식 문서: https://zustand.docs.pmnd.rs/
• Updating state: https://zustand.docs.pmnd.rs/guides/updating-state

글 소개·학습 준비·전체 목차

Zustand · 9 / 15 · 오류 해결 · 리렌더링

Zustand state를 변경했는데 화면이 바뀌지 않는다면 대부분 다음 세 영역을 먼저 확인하면 됩니다.

1. 실제로 새 state가 만들어졌는가
2. 컴포넌트가 바뀐 값을 selector로 구독하고 있는가
3. selector가 비교하기 어려운 참조를 반환하고 있지 않은가

먼저 한 작업만 가진 별도 store에서 잘못된 업데이트와 새 참조 업데이트를 비교합니다. 하단에서는 같은 수정 원칙을 TaskFlow에 적용합니다.

이번 글에서 배우는 내용

• 같은 객체·배열 참조를 유지했을 때 문제
• selector 범위 오류
• 파생 배열 selector 문제
• action 내부 mutation 진단
• 리렌더링 문제를 찾는 순서

목차