상태 관리 라이브러리로 자주 사용하던 recoil 이 업데이트가 이뤄지지 않아,
마이그레이션할 라이브러리들을 찾던 중 후보에 있던 Zustand 에 대해 정리해보고자 합니다.
관련해서, Jotai 에 대한 포스팅은 여기서 확인하실 수 있습니다.
Zustand 는 React 를 위한 경량 상태 관리 라이브러리로,
Redux의 복잡함 없이 전역 상태를 간단하게 관리할 수 있도록 설계되었습니다.
독일어로 "상태(state)" 를 의미하며, Zustand 는 상태 관리 자체에만 집중한 미니멀한 API 를 제공합니다.
Zustand 는 React Context 를 내부적으로 사용하지만, 개발자가 직접 <Provider>를 감쌀 필요가 없습니다.
const useStore = create((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
}))
이렇게 만든 store 는 어디서든 hook 처럼 바로 사용 가능합니다.
Zustand는 상태(state)와 상태를 변경하는 로직(action)을 하나의 store 안에서 함께 정의합니다.
reducer, action type, dispatch 개념이 없으며 상태 변경 흐름이 직관적이고, 코드 이동이 적어 가독성이 좋습니다.
Zustand 는 selector 기반 구독을 지원하여, 해당 값이 변경될 때만 리렌더링하고 성능 최적화를 기본 사용 방식으로 유도합니다.
const count = useStore((state) => state.count)
Redux 의 useSelector와 비슷하지만, 설정과 개념이 훨씬 가볍습니다.
const { getState, setState } = useStore
// 예시
export const fetchUser = async () => {
useStore.setState({ loading: true })
const user = await api.getUser()
useStore.setState({
user,
loading: false,
})
}
Zustand store 는 React 에 강하게 종속되지 않아, util 함수, event handler, 비동기 로직, 외부 서비스 로직 등에서 직접 상태 접근이 가능합니다.
import { create } from 'zustand'
type Store = {
count: number
increase: () => void
}
export const useCounterStore = create<Store>((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
}))
const Counter = () => {
const count = useCounterStore((state) => state.count)
const increase = useCounterStore((state) => state.increase)
return <button onClick={increase}>{count}</button>
}
Zustand 는 store 를 여러 개로 나누는 패턴이 잘 어울립니다.
useAuthStore
useUserStore
useUIStore
도메인 단위로 나누면, 의존성이 감소하고 테스트가 용이하며 코드 스플리팅에도 유리합니다.
Zustand 와 Jotai 는 철학부터 조금 다릅니다. 먼저 핵심 개념들을 비교해보면,
Zustand 는 중앙 집중식 상태 관리, Redux 를 단순화한 느낌으로 앱 전반에서 공유되는 상태에 강합니다. (유저 정보, 인증, UI 상태, 설정 등)
Jotai 는 분산된 상태 관리로, 상태를 작은 atom 단위로 쪼개서 조합하여 React Suspense, Concurrent Features 와 궁합이 좋아 컴포넌트 단위 상태 조합에 강합니다. (폼 상태, 필터, UI 조각 상태)
💡저는 개인적으론, Zustand 가 액션 트랙킹이 명시적이여서 둘 중에 하나를 골라야 한다면 Zustand 를 선택할 것 같습니다.
Zustand 는 "상태 관리를 단순하게 유지하고 싶을 때 가장 빛나는 도구" 라고 생각합니다.
러닝 커브가 낮고, 코드가 짧고 단순하며 구조가 강제되지 않는다는 장점이 있습니다.
Redux 의 대안이 필요하거나, Context API 가 복잡해지기 시작했다면,
Zustand 는 현실적인 선택지가 될 것 같습니다. Jotai 와 비교해보면서 프로젝트 요구사항에 맞는 도구를 선택해보시길 추천드립니다.