[React] Zustand

Zustand Docs

 

hook 기반의 상태 관리 라이브러리입니다.

Store 생성

import { create } from 'zustand'

interface BearState {
  bears: number;
  increase: (by: number) => void;
}

const useBear = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

 

필요한 상태값과 메소드 타입을 정의하여 createStore 메소드의 제네릭 타입으로 사용합니다.
createStore 파라미터의 set 메소드를 통해 store의 상태값을 업데이트하는 메소드를 정의할 수 있습니다.

상태값을 LocalStorage 관리하는 persist store

persist를 사용하여 localStorage에 상태값을 관리할 수 있습니다.

 

import { createStore } from 'zustand/vanilla'
import { persist } from 'zustand/middleware'

type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
  setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const positionStore = createStore<PositionStore>()(
  persist(
    (set) => ({
      position: { x: 0, y: 0 },
      setPosition: (position) => set({ position }),
    }),
    { name: 'position-storage' },
  ),
)

Selector

selector를 활용하여 store에 접근할 수 있습니다.

// 1
const bears = useBearStore((state) => state.bears);
// 2
const { bears } = useBearStore();

 

다음과 같은 방식으로 커스텀 hook을 만들어 사용할 수 있습니다.

export const useBears = () => useBearStore((state) => state.bears);
// 사용
const bears = useBears();