2026-02-01

Zustand

Zustand란?

React를 위한 가볍고 직관적인 전역 상태 관리 라이브러리

• 전역 상태를 관리
• 간단하고 성능이 좋음
• 보일러플레이트가 거의 없다

⇒ 전역 상태가 필요한데 Redux까지는 과하다 할 때 사용

특징

• 아주 가볍다 (bundle size 작음)
• Context Provider 필요 없음
• Hook 기반 API
• 불필요한 리렌더링 최소화
• 비동기 로직 처리 쉬움

기본 사용 구조

• store 생성

  import { create } from "zustand";
  
  const useStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }));
  

  • create로 store를 정의
  • 상태 + 상태 변경 함수(action)를 한 곳에 작성

• 컴포넌트에서 사용

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

  • 필요한 상태만 선택적으로 구독
  • 선택한 값이 바뀔 때만 리렌더링 → 성능 좋음

다른 상태관리와 비교

• Zustand vs Context API ⇒ Context의 리렌더링 문제를 깔끔하게 해결 | 항목 | Context API | Zustand | | ——– | ————- | —————– | | 사용성 | 설정 번거로움 | 매우 간단 | | Provider | 필요 | 불필요 | | 리렌더링 | 범위 큼 | 필요한 컴포넌트만 | | 규모 | 소규모 | 중·대규모도 가능 |
• Zustand vs Redux ⇒ Redux의 복잡함 없이 전역 상태 관리 | 항목 | Redux | Zustand | | ————– | ———- | —————- | | 보일러플레이트 | 많음 | 거의 없음 | | 러닝커브 | 높음 | 낮음 | | 미들웨어 | 필수적 | 선택적 | | 비동기 처리 | thunk/saga | 그냥 함수로 처리 |

비동기 로직 처리

Zustand는 비동기 전용 도구가 필요 없다

const useStore = create((set) => ({
  user: null,
  fetchUser: async () => {
    const res = awaitfetch("/api/user");
    const data = await res.json();
    set({ user: data });
  },
}));

• action 안에서 async/await 바로 사용
• 실무에서 API 상태 관리에 편함

상태 분리 & 구조화

const useAuthStore = create((set) => ({
  accessToken: null,
  login: (token) => set({ accessToken: token }),
  logout: () => set({ accessToken: null }),
}));

도메인별 store 분리 (auth, user, ui, modal 등)

이런 상황에 쓰면 좋다

• 로그인 정보 / 유저 정보
• 모달 열림 여부
• 필터, 정렬 상태
• 여러 페이지에서 공유되는 UI 상태
• SPA 전역 상태 관리

참고자료

• https://mi-dairy.tistory.com/entry/React-Zustand%EC%93%B0%EB%A9%B4-Redux-%EC%9D%B4%EC%A0%9C-%EB%AA%BB-%EC%94%80-Zustand-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0
• https://www.heropy.dev/p/n74Tgc
• https://hyunki99.tistory.com/111
• https://velog.io/@hyejeong/Zustand-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0
• https://ldd6cr-adness.tistory.com/entry/Zustand-Flux-%ED%8C%A8%ED%84%B4%EC%9D%98-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC