Zustand에 관하여

Zustand는 React에서 전역 상태를 간단하게 관리할 수 있도록 도와주는 작은 상태 관리 라이브러리이다.

1. Zustand 기본 개념

Zustand는 전역 상태(store)를 만들고, 그 상태를 React 컴포넌트에서 쉽게 사용할 수 있게 한다.

• Stor: 데이터를 저장하는 객체. 이상태에 따라 UI가 업데이트 된다.

• Setter 함수: 상태를 변경할 때 사용하는 함수.

• Getter 함수: 상태 값을 가져오는 함수.

2. 왜 Zustand를 사용할까?

• Redux, Recoil에 비해 코드가 매우 간결하고 학습 난이도 낮음

• Context API 없이도 상태를 전역에서 공유 가능

• 모듈화/테스트에 강하고, 가볍고 빠름

• 리렌더링 제어가 용이 (선택적 구독)

3. 코드 분석하기

import { create } from 'zustand'; // zustand의 create 함수를 사용해 store 생성
import { v4 as uuidv4 } from 'uuid'; // 고유한 id를 생성해주는 uuid 라이브러리
import { ReactNode } from 'react'; // ReactNode는 React의 JSX 요소를 타입으로 사용하기 위함

const uuid = uuidv4(); // 고유한 UUID를 생성

• zustand의 create 함수로 store를 만든다.
• uuidv4는 모달마다 고유한 ID를 부여할 때 사용된다.
• ReactNode 타입은 React 컴포넌트나 JSX를 담는 타입이다.

3. Store 정의

interface ModalStoreState {
  isModalOpen: boolean; // 모달이 열려 있는지 여부
  modal: ReactNode | null; // 모달 컴포넌트 (JSX)
  modalId: string | null; // 모달의 고유 ID
  setModalOpen: (modal: ReactNode) => void; // 모달 열기 함수
  setModalClose: () => void; // 모달 닫기 함수
}

이 부분은 Zustand에서 관리할 모달 상태와 함수들을 정의한 인터페이스이다.

• isModalOpen: 모달이 열려 있는지 여부를 나타내는 boolean 값
• modal: 표시할 모달 컴포넌트.
• modalId: 열려 있는 모달에 고유하게 부여한 UUID.
• setModalOpen: 모달을 열고 모달 컴포넌트를 설정하는 함수.
• setModalClose: 모달을 닫는 함수.

4. Zustand Store 생성

const useModalStore = create<ModalStoreState>((set) => ({
  isModalOpen: false, // 초기값: 모달 닫힘
  modal: null, // 초기값: 표시할 모달 없음
  modalId: null, // 초기값: 모달 ID 없음
  setModalOpen: (modal) => set({ isModalOpen: true, modalId: uuid, modal }), // 모달 열기
  setModalClose: () => set({ isModalOpen: false, modalId: null, modal: null }), // 모달 닫기
}));

여기서는 Zustand store를 정의한다. set을 통해 상태를 업데이트 할 수 있게 해준다.

• setModalOpen: 모달을 열고 상태를 업데이트한다.
• setModalClose: 모달을 닫고 상태를 초기화 한다.