Zustand

상세 설명

Zustand는 React를 위한 가볍고 유연한 상태 관리 라이브러리입니다. 독일어로 "상태"를 의미하며, pmndrs(Poimandres) 팀이 Jotai, Valtio와 함께 개발하고 있습니다.

Redux의 복잡한 보일러플레이트 없이 간단한 API로 전역 상태를 관리할 수 있습니다. Hooks 기반이라 React 개발자에게 친숙하고, Provider 없이도 동작합니다.

최소한의 API: create 함수 하나로 스토어 생성
Provider 불필요: Context 없이 어디서든 상태 접근
선택적 구독: 필요한 상태만 선택해 불필요한 리렌더링 방지
미들웨어 지원: persist, devtools, immer 등 확장 가능
React 외부에서도 사용: getState, setState로 React 밖에서도 접근

작은 번들 크기(~1KB)와 직관적인 사용법으로 Redux를 대체하는 인기 있는 선택지가 되었습니다.

코드 예제

기본 스토어 생성

import { create } from 'zustand';

// 스토어 생성
const useStore = create((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
    reset: () => set({ count: 0 }),
}));

// 컴포넌트에서 사용
function Counter() {
    const { count, increment, decrement } = useStore();

    return (
        <div>
            <span>{count}</span>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
        </div>
    );
}

선택적 구독으로 성능 최적화

const useStore = create((set) => ({
    user: { name: '홍길동', email: 'hong@example.com' },
    posts: [],
    setUser: (user) => set({ user }),
}));

// 나쁜 예: 전체 상태 구독 - posts 변경시에도 리렌더링
const { user } = useStore();

// 좋은 예: 필요한 것만 선택 - user 변경시에만 리렌더링
const user = useStore((state) => state.user);

// 여러 값 선택 (shallow 비교)
import { shallow } from 'zustand/shallow';
const { name, email } = useStore(
    (state) => ({ name: state.user.name, email: state.user.email }),
    shallow
);

미들웨어 사용 (persist + devtools)

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

const useAuthStore = create(
    devtools(
        persist(
            (set) => ({
                user: null,
                token: null,
                login: (user, token) => set({ user, token }),
                logout: () => set({ user: null, token: null }),
            }),
            { name: 'auth-storage' } // localStorage 키
        ),
        { name: 'AuthStore' } // DevTools 이름
    )
);

실무 대화 예시

팀장

"새 프로젝트 상태 관리 어떻게 할지 정했어?"

개발자

"Redux 대신 Zustand 쓰려고요. 보일러플레이트도 적고 번들 크기도 작아서요. 간단한 create 함수 하나면 바로 시작할 수 있어요."

팀장

"DevTools는 되나? 디버깅할 때 필요한데."

개발자

"네, devtools 미들웨어 쓰면 Redux DevTools에서 다 볼 수 있어요!"

주의사항

선택적 구독 필수

전체 상태를 구독하면 관련 없는 상태 변경에도 리렌더링됩니다. selector 함수로 필요한 상태만 선택하세요.

객체 비교 시 shallow 사용

여러 값을 객체로 선택할 때는 shallow 비교를 적용해야 불필요한 리렌더링을 방지할 수 있습니다.

서버 상태는 별도 관리

API 데이터 같은 서버 상태는 TanStack Query 등 전용 라이브러리가 더 적합합니다. Zustand는 클라이언트 상태에 집중하세요.

상세 설명

코드 예제

실무 대화 예시

주의사항

관련 용어

더 배우기