싱글톤 패턴 (feat.Zustand)

싱글톤 패턴

싱글톤 패턴은 애플리케이션 전체에서 하나의 인스턴스만 생성해서 공유하는 디자인 패턴

즉, 하나의 상태 저장소(store)를 만들고 그걸 모든 컴포넌트가 공유해서 쓰는 구조

Zustand는 이 개념을 자연스럽게 지원한다. Zustand로 만든 store는 프로젝트 내에서 단 한 번만 생성되고, 그 store를 가져와 사용하는 모든 컴포넌트는 동일한 전역 상태를 바라보게 됨.

예시 (로그인 상태 관리)

import { create } from "zustand";

interface AuthState {
  user: { id: string; name: string } | null;
  login: (user: { id: string; name: string }) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

• 여기에서 useAuthStore는 딱 한번만 생성
• 이제 앱 어디서든 동일한 상태를 가져다가 사용 가능

핵심

• Zustand의 store는 앱 전체에서 한 번만 생성되는 전역 상태 저장소
• 여러 컴포넌트가 store를 참조해도 동일한 인스턴스(싱글톤)를 공유
• 덕분에 상태 일관성을 유지할 수 있고, store를 여러 번 만들 필요 없음