Zustand란? React 상태 관리 선택 기준과 기본 Store

import { create } from 'zustand';
type Selection = { selectedId: string | null; select: (id: string | null) => void };
const useSelection = create<Selection>()((set) => ({
  selectedId: null,
  select: (selectedId) => set({ selectedId }),
}));
function SelectedLabel() {
  const id = useSelection((state) => state.selectedId);
  return <p>선택: {id ?? '없음'}</p>;
}
export default function App() {
  const select = useSelection((state) => state.select);
  return (
    <main>
      <SelectedLabel />
      <button onClick={() => select('task-1')}>첫 작업 선택</button>
      <button onClick={() => select(null)}>선택 해제</button>
    </main>
  );
}

npm run dev
npm run build

Zustand의 핵심 구조

가장 기본적인 Zustand store는 다음 모양입니다.

import { create } from 'zustand';


type CounterStore = {
  count: number;
  increase: () => void;
};


export const useCounterStore = create<CounterStore>((set) => ({
  count: 0,
  increase: () =>
    set((state) => ({
      count: state.count + 1,
    })),
}));

구조를 나누면 다음과 같습니다.

count
→ state


increase
→ action


set
→ store 상태 변경 함수

컴포넌트에서는 필요한 값만 가져옵니다.

const count = useCounterStore((state) => state.count);
const increase = useCounterStore((state) => state.increase);

reducer + Context와 비교

React reducer + Context에서는 보통 다음 구조가 있습니다.

TaskContext
TaskProvider
taskReducer
dispatch
useContext

Zustand로 옮기면 다음 구조로 단순화할 수 있습니다.

useTaskStore
state
actions
selectors

기존 reducer에서는 action 객체를 dispatch합니다.

dispatch({
  type: 'task/toggled',
  id,
});

Zustand에서는 메서드처럼 action을 호출할 수 있습니다.

toggleTask(id);

둘 중 하나가 항상 더 좋은 것은 아닙니다. 중요한 차이는 Zustand가 Provider 없이 store를 직접 구독하고, 필요한 값만 선택하는 패턴을 쉽게 제공한다는 점입니다.

create는 무엇을 만드는가

create는 React 컴포넌트에서 사용할 수 있는 store hook을 만듭니다.

const useStore = create((set) => ({
  count: 0,
}));

이후 컴포넌트는 useStore를 호출해 state를 구독합니다.

const count = useStore((state) => state.count);

여기서 selector 함수가 어떤 값을 반환하는지가 리렌더링 범위를 결정하는 중요한 기준이 됩니다.

selector는 7~9회차에서 자세히 다룹니다.

state와 action을 같이 두는 이유

상태와 변경 로직을 store에 함께 두면 컴포넌트가 구체적인 변경 방법을 알 필요가 없습니다.

좋지 않은 예:

const tasks = useTaskStore((state) => state.tasks);
const setTasks = useTaskStore((state) => state.setTasks);


setTasks(
  tasks.map((task) =>
    task.id === id
      ? { ...task, completed: !task.completed }
      : task,
  ),
);

더 나은 방향:

const toggleTask = useTaskStore((state) => state.toggleTask);


toggleTask(id);

컴포넌트는 “무엇을 할지”만 요청하고, “어떻게 상태를 바꿀지”는 store가 담당합니다.

Store 설계에서 먼저 정할 것

store를 만들기 전에 다음을 먼저 정합니다.

1. 어떤 state가 필요한가
2. 어떤 action이 필요한가
3. 어떤 값은 로컬 state로 남길 것인가
4. 어떤 값은 persist할 것인가
5. 서버 상태와 겹치는 값은 없는가

TaskFlow에서는 우선 다음 구조를 목표로 합니다.

type TaskStore = {
  tasks: Task[];
  selectedTaskId: string | null;
  isTaskModalOpen: boolean;
  filter: TaskFilter;


  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;
};

Store를 너무 크게 만들지 않는 기준

한 store에 모든 앱 상태를 넣는 것은 권장되지 않습니다.

다음처럼 역할을 나눌 수 있습니다.

taskStore
→ TaskFlow 작업과 선택 상태


uiStore
→ 전역 레이아웃, theme, sidebar 등


server state
→ TanStack Query

처음부터 store를 여러 개 만들 필요는 없지만, 책임이 다른 상태를 구분할 수 있어야 합니다.

자주 발생하는 설계 실수

setter만 많이 만듭니다

setTasks
setSelectedTaskId
setModal
setFilter

이 방식은 store를 단순한 전역 변수 모음으로 만들기 쉽습니다.

가능하면 도메인 행동을 action 이름으로 표현합니다.

addTask
toggleTask
selectTask
openTaskModal

파생 값을 state로 저장합니다

예를 들어 completedCount는 tasks에서 계산할 수 있습니다.

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

계산 가능한 값을 별도 state로 저장하면 두 값이 어긋날 가능성이 생깁니다.

학습 완료 체크리스트

• create가 store hook을 만든다는 것을 이해했습니다.
• state와 action의 차이를 설명할 수 있습니다.
• reducer + Context와 Zustand 구조를 비교할 수 있습니다.
• setter보다 행동 중심 action을 설계할 수 있습니다.
• 파생 값을 불필요하게 state로 저장하지 않을 수 있습니다.

import type { Task } from './task';


export type TaskFilter =
  | 'all'
  | 'active'
  | 'completed';


export type TaskStore = {
  tasks: Task[];
  selectedTaskId: string | null;
  isTaskModalOpen: boolean;
  filter: TaskFilter;


  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;
};

zustand-step-02-boundary

import type { Task } from './types/task';


export type TaskFilter =
  | 'all'
  | 'active'
  | 'completed';


export type TaskStore = {
  tasks: Task[];
  selectedTaskId: string | null;
  isTaskModalOpen: boolean;
  filter: TaskFilter;


  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;
};

TaskContext
TaskProvider
taskReducer
dispatch

useTaskStore
├─ tasks
├─ selectedTaskId
├─ isTaskModalOpen
├─ filter
└─ actions

✓ 1. 전체 로드맵
✓ 2. 상태 경계 결정
→ 3. Store 구조 설계
○ 4. Zustand 설치
○ 5. state 이전
○ 6. action 이전
○ 7. selector
○ 8~15. 최적화·persist·실무 구조

zustand-step-03-store-design

다음 학습

다음 글에서는 Zustand를 실제 설치하고 useTaskStore를 만든 뒤, 기존 Context와 공존시키면서 최소 상태 하나를 연결합니다.

다음 글: Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기

공식 문서

• Zustand 공식 문서: https://zustand.docs.pmnd.rs/
• create API: https://zustand.docs.pmnd.rs/apis/create

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

Zustand · 3 / 15 · 필수 학습 · Store 설계

Zustand는 React에서 사용할 수 있는 상태 관리 라이브러리입니다. 핵심은 하나의 store 안에 state와 변경 함수를 정의하고, 컴포넌트가 필요한 값만 선택해서 구독하는 구조입니다.

위쪽은 작은 선택 예제로 state와 action의 관계를 익힙니다. 아래쪽은 기존 TaskFlow의 reducer + Context와 Zustand 구조를 비교하는 설계 과제입니다.

이번 글에서 배우는 내용

• Zustand store의 기본 구조
• state와 action의 역할
• create 함수의 개념
• reducer + Context와 Zustand 비교
• store가 커지지 않게 설계하는 기준
• TaskFlow useTaskStore 설계

목차