정정지용
기술스택 목록
프론트엔드

Zustand

프로젝트 3개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

React 애플리케이션에서 간결한 API로 전역 상태를 관리하는 경량 상태 관리 라이브러리

Zustand는 React를 위한 작고 빠른 상태 관리 라이브러리입니다. Redux나 MobX와 달리 보일러플레이트 코드 없이 훅 기반으로 전역 상태를 정의하고 사용할 수 있습니다. Provider 컴포넌트로 감쌀 필요 없이 store를 만들고 필요한 곳에서 바로 불러 쓸 수 있어, 간단한 인증 토큰 관리부터 복잡한 애플리케이션 상태까지 유연하게 다룰 수 있습니다.

이럴 때 사용합니다

  • Redux의 보일러플레이트가 과하다고 느껴질 때
  • JWT 토큰, 사용자 정보 등 간단한 전역 상태를 빠르게 관리하고 싶을 때
  • localStorage와 상태를 동기화해야 할 때
  • Provider 없이 어디서든 상태에 접근하고 싶을 때

핵심 개념

Store
애플리케이션의 전역 상태와 그 상태를 변경하는 함수들을 담고 있는 객체입니다. create 함수로 정의하며, 컴포넌트 외부에서도 접근 가능합니다.
Hook
Store에서 만들어진 useStore 훅을 컴포넌트에서 호출하여 상태를 구독하고 업데이트합니다. 선택자를 통해 필요한 상태만 구독할 수 있습니다.
Selector
Store에서 특정 부분만 선택하여 가져오는 함수입니다. 불필요한 리렌더링을 방지하기 위해 사용합니다.
Middleware
Store의 동작을 확장하는 함수로, persist(로컬스토리지 동기화), devtools(개발자도구 연동) 등이 있습니다.
Immer
불변성을 유지하면서 상태를 업데이트하기 위해 Zustand와 함께 사용할 수 있는 라이브러리입니다. 복잡한 중첩 객체 수정을 직관적으로 만들어줍니다.

기본 인증 토큰 관리 Store

토큰을 전역으로 관리하고 localStorage에 자동으로 동기화하는 기본 예시입니다. persist 미들웨어로 새로고침 후에도 상태가 유지됩니다.

TypeScript
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface AuthStore {
  token: string | null;
  setToken: (token: string) => void;
  clearToken: () => void;
}

const useAuthStore = create<AuthStore>()(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token }),
      clearToken: () => set({ token: null }),
    }),
    { name: 'auth-storage' } // localStorage 키
  )
);

// 컴포넌트에서 사용
function MyComponent() {
  const token = useAuthStore((state) => state.token);
  const setToken = useAuthStore((state) => state.setToken);
  // ...
}

처음 쓸 때 흔한 함정

  • selector 없이 전체 store를 구독하면 불필요한 리렌더링이 발생합니다
  • set 함수 내부에서 직접 state를 수정하면 안 됩니다. 새 객체를 반환해야 합니다
  • persist 미들웨어 사용 시 민감한 정보는 암호화 없이 localStorage에 저장되므로 주의가 필요합니다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Axios3Docker3nginx3React3React Hook Form3TypeScript3Vite3Firebase2MSW2React Query2React Router2SCSS2