Zustand [초간단 정리] [전역 상태 관리 라이브러리]

필자는 Redux로 전역 상태 관리를 할때 redux-tookit과 커스텀 훅을 만들어서 사용하였다.

 

Zustand를 사용하연 위의 두가지를 합쳐놓은 것 같아 코드양도 줄고 사용하기 편한 것 같다.

 

먼저 store를 만든다. 상태 그룹핑 하기도 편한것 같다 아래 코드를 보면 이해가 될 것이다.

import create from 'zustand'

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

샘플의 함수 이름 부터가 커스텀 훅(use...) 이다.

 

컴퍼넌트에서 해당 훅을 사용하면 된다.

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>
}

처음 react를 접하고 전역 상태관리를 위한 엄청 난 코드량을 보고 이게 맞나?? 라는 생각을 했었는데

Zustand를 사용하면 효과적인 전역 상태관리와 개발속도를 낼 수 있을 것 같다.

참고자료: https://github.com/pmndrs/zustand

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React