1. 전역 상태 관리의 필요성

• 문제점:
  • 복잡한 애플리케이션에서 여러 컴포넌트 간에 공유해야 하는 데이터를 관리하는 것은 props 끌어올리기(lifting state up)나 Context API만으로는 한계가 있습니다.
  • 상태 관리의 복잡성이 증가하면 리렌더링 최적화 및 디버깅이 어려워집니다.
• 전역 상태 관리 해결책:
  • 중앙 집중식 스토어를 도입하여 한 곳에서 모든 상태를 관리하면, 컴포넌트 간 데이터 공유와 업데이트가 더욱 명확해지고, 유지보수성이 향상됩니다.

2. Zustand란 무엇인가?

2.1 Zustand의 개요

• 정의:

  • Zustand는 간단하고 최소한의 보일러플레이트로 전역 상태 관리를 구현할 수 있는 React 전용 상태 관리 라이브러리입니다.

• 왜 선택하는가?

  • 경량성과 간결성: 복잡한 설정 없이 간단히 스토어를 생성하고 사용할 수 있습니다.
  • 성능 최적화: 상태를 구독하는 컴포넌트만 리렌더링하도록 최적화되어 있습니다.
  • 미들웨어 지원: 상태 유지(persist), 개발자 도구(devtools) 등 다양한 미들웨어를 쉽게 추가할 수 있습니다.

• 관련 공식 문서:

  Zustand Getting Started

3. Zustand의 주요 API와 개념

3.1 create / createStore

• create / createStore:

  • Zustand에서 전역 상태 스토어를 생성하기 위한 기본 함수입니다.

  • 예시 코드:

    // src/store/useStore.ts
    import { create } from "zustand";
    
    interface StoreState {
      count: number;
      increase: () => void;
      reset: () => void;
    }
    
    export const useStore = create<StoreState>((set) => ({
      count: 0,
      increase: () => set((state) => ({ count: state.count + 1 })),
      reset: () => set({ count: 0 }),
    }));
    

  • 코드 설명

  • 설명:

    create 함수를 호출하면, 상태 객체와 상태 업데이트 함수를 포함하는 hook(useStore)을 반환합니다. 이 hook은 컴포넌트에서 직접 사용하여 전역 상태에 접근할 수 있게 합니다.

3.2 useStore