Zustand

 

1. Zustand 란?

 

- 상태 관리 라이브러리, Redux보다 간단함.

 

 

2. 주요 메서드

 

1) create : Zustant의 기본 스토어 생성

 

 - create(set => {...})를 사용하면 상태(store)*를 만들 수 있음.

 - set을 이용해 상태 업데이트 가능!

 - Redux의 createStore(reducer) 또는 configureStore({ reducer })와 같음

import { create } from "zustand";

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

function Counter() {
  const { count, increase } = useStore();

  return (
    <div>
      <p>{count}</p>
      <button onClick={increase}>+1</button>
    </div>
  );
}

 

 

2) persist : Zustand에서 상태를 저장하는 미들웨어

 

 - Zustand 상태를 로컬 스토리지(LocalStorage)나 세션 스토리지(SessionStorage)에 저장 가능

 - 브라우저 새로고침 후에도 상태 유지됨!

 - Redux의 경우, redux-persist라이브러리를 사용해야 가능함.

import { create } from "zustand";
import { persist } from "zustand/middleware";

const useLoginStore = create(
  persist(
    (set) => ({
      isLoggedIn: false,
      login: () => set({ isLoggedIn: true }),
      logout: () => set({ isLoggedIn: false }),
    }),
    { name: "login-storage" } // 로컬스토리지에 저장되는 key 이름
  )
);

 

 

3. Redux와 대응 함수 비교

기능	Zustand (create)	Redux(configureStore)
상태 생성	create((set) => ({ state }))	configureStore({ reducer })
상태 변경	set((state) => ({ newValue }))	dispatch({ type, payload })
상태 가져오기	get().state	useSelector(state => state.value)
비동기 처리	async set(...) 가능	redux-thunk 또는 redux-saga 필요
로컬 저장	persist() 한 줄로 설정	redux-persist 설정 필요
코드 복잡도	간단함	비교적 복잡함
사용 사례	소규모 프로젝트, 빠른 개발	대규모 프로젝트, 복잡한 상태 관리

 

 

 

 

* store : 전역 상태를 저장하고 관리하는 저장소