[Javascript] Zustand

상태 관리 라이브러리로 사용이 간편하고 굉장히 쉽다.

 

설치

npm install zustand

 

사용법

1. 스토어를 만든다. create 함수를 이용하여 상태와 그 상태를 변경하는 액션을 정의한다.

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

2. 구성 요소를 바인딩 한다. 후크를 사용, 상태를 선택하면 구성 요소가 변경시 리렌더링 된다. 컴포넌트에서 useStore를 사용할 때는 스토어에서 상태를 어떤 형태로 꺼내올지 결정하는 셀렉터 함수를 전달해 주어야 한다. 셀렉터 함수를 전달하지 않으면 스토어 전체가 리턴된다.

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}