2026-01-29

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