상태관리 라이브러리, Zustand

김덕진·2025년 6월 7일

React

목록 보기

7/13

Zustand: 간단하고 가벼운 전역 상태 관리 라이브러리

Redux가 너무 무겁게 느껴질 때, 더 간단하고 직관적인 상태 관리 방법이 필요할 때 Zustand가 좋은 대안이 됩니다.

Zustand는 React 앱에서 전역 상태를 관리하기 위한 가벼운 상태 관리 라이브러리입니다. Zustand는 독일어로 "상태(state)"를 의미하며, Redux처럼 중앙 저장소에서 상태를 관리하지만, 보다 직관적이고 코드가 간결하다는 큰 장점을 가지고 있습니다. Redux에서는 Action, Reducer, Store 구성 등으로 인해 초보자에게는 진입 장벽이 높은 반면, Zustand는 하나의 훅(hook)으로 모든 것을 처리할 수 있어 훨씬 접근성이 좋습니다.

또한 Zustand는 React 외부에서도 상태에 접근할 수 있고, SSR(서버 사이드 렌더링) 환경에서도 잘 작동하여 Next.js 등 다양한 프레임워크와도 궁합이 좋습니다. 기본적으로 불변성을 유지하며, 확장성을 위해 Devtools, Persist, Immer 등 다양한 미들웨어도 지원합니다.

✅ 핵심 요약

Zustand는 boilerplate 없이도 전역 상태를 쉽게 관리할 수 있습니다.
상태는 함수 기반으로 정의되고, 직접적인 사용이 가능합니다.
React 외부에서도 상태 접근이 가능합니다.
Redux처럼 복잡한 action/reducer 구조 없이도 사용이 가능합니다.

1. 기본 사용법

1-1. 상태 정의

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

create 함수 안에 상태와 업데이트 로직을 정의합니다.
set은 상태를 업데이트할 때 사용합니다.

주의: 상태는 객체 형태로 리턴되어야 합니다.

1-2. 컴포넌트에서 사용

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

<button onClick={increment}>+</button>

selector 함수를 통해 필요한 값만 추출할 수 있습니다.
필요한 부분만 리렌더링되므로 성능도 좋습니다.

주의: useStore를 여러 번 호출해도 내부적으로 하나의 store를 공유합니다.

2. 중첩된 상태와 업데이트

const useUserStore = create((set) => ({
  user: { name: 'Tom', age: 25 },
  setName: (name) => set((state) => ({ user: { ...state.user, name } })),
}));

깊은 상태도 쉽게 다룰 수 있습니다.
불변성을 유지하면서 직접적으로 업데이트하는 방식입니다.

예시:

const name = useUserStore((state) => state.user.name);
const setName = useUserStore((state) => state.setName);

3. Zustand의 장점

✅ 간결함

액션 타입, 리듀서, 디스패치 등의 복잡한 구조가 없습니다.

✅ React 외부에서도 접근 가능

// 컴포넌트 외부에서도 사용 가능
useStore.getState().count;
useStore.setState({ count: 10 });

✅ 미들웨어 확장 가능

devtools, persist, immer 등의 미들웨어를 지원합니다.

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

const useStore = create(
  devtools(
    persist((set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
    }), { name: 'counter-storage' })
  )
);