Zustand

Zustand 상태 관리 라이브러리 중 하나로,

작은 패키지 크기와 직관적인 사용법 덕분에 MoBx와 Redux와 더불어
많이 사용되고 있다.

Zustand란 상태라는 뜻을 가진 독일어이다.

단순화된 Flux 원리를 사용하는 작고 빠르며 확장 가능한 상태 관리 솔루션이다. Hooks에 기반해 편리한 API를 제공한다.

Zustand는 다음과 같은 장점을 지니고 있다.

이름 뜻도 쉽지만 사용방법 또한 매우 쉽다.
바닐라 자바스크립트를 기준으로 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다.

상태가 변경되면 불필요한 리렌더링을 일으키지 않는다.

보일러플레이트가 거의 없다.
보일러플레이트란 최소한의 변경으로 여러 곳에서 재사용되며 반복적으로 비슷한 형태를 띄는 양상을 말한다.

redux Devtools를 사용할 수 있어 디버깅에 용이하다.

hooks/useLoginModal.tsx

import { create } from 'zustand';

interface LoginModalStore {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
}

const useLoginModal = create<LoginModalStore>((set) => ({
  isOpen: false,
  onOpen: () => set({ isOpen: true }),
  onClose: () => set({ isOpen: false })
}));


export default useLoginModal;

hooks/useRegisterModal.tsx

import { create } from 'zustand';

interface RegisterModalStore {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
}

const useRegisterModal = create<RegisterModalStore>((set) => ({
  isOpen: false,
  onOpen: () => set({ isOpen: true }),
  onClose: () => set({ isOpen: false })
}));


export default useRegisterModal;

hooks/useRentModal.tsx

import { create } from 'zustand';

interface RentModalStore {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
}

const useRentModal = create<RentModalStore>((set) => ({
  isOpen: false,
  onOpen: () => set({ isOpen: true }),
  onClose: () => set({ isOpen: false })
}));


export default useRentModal;

hooks/useSearchModal.tsx

import { create } from 'zustand';

interface SearchModalStore {
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
}

const useSearchModal = create<SearchModalStore>((set) => ({
  isOpen: false,
  onOpen: () => set({ isOpen: true }),
  onClose: () => set({ isOpen: false })
}));


export default useSearchModal;

Zustand

는 복잡한 상태 관리가 필요 없는 작은 규모의 프로젝트에 적합한 가벼운 상태 관리 라이브러리다. 간단하고 직관적인 API를 제공하고 Redux보다 더 간결한 방법으로 상태 관리를 해준다.

반면에

Redux

는 복잡한 상태 관리를 필요로 하고 긴 개발 기간이 소요되는 큰 규모의 프로젝트에 알맞는 강력한 상태 관리 라이브러리다. 더욱 구조적이고 표준화 된 상태 관리 방식을 제공하는데 이는 일관성과 팀 멤버간의 협력을 유지하는 데에 도움을 준다.