Zustand란?

독일어로 '상태'라는 뜻을 가진 라이브러리이며 Jotai를 만든 카토 다이시가 제작에 참여하고 적극적으로 관리하는 라이브러리이다. Redux와 같이 Flux 패턴을 활용하는 기술로 Redux와는 달리 콘텐츠 제공자를 앱에 래핑하지 않아도 된다. 전체 앱에 대해 단일 스토어를 보유해야 하는 Redux와 달리 Zustand는 여러 개의 소규모 스토어를 보유할 것을 권장하고 있다.

직관적인 사용법
작은 패키지 사이즈
적은 보일러 플레이트 코드
상태 변경 시 불필요한 리-렌더링 제어가 쉬움
컴포넌트 밖에서도 상태 변경이 가능

사용 방법 (Custom Hook 사용)

스토어를 만들 때는 create 함수를 이용하여 상태와 그 상태를 변경하는 액션을 정의한다. 그러면 리액트 컴포넌트에서 사용할 수 있는 useStore 훅을 리턴함. 모듈성을 위해 스토어를 작은 단위로 유지하는 것이 권장된다.

import create from 'zustand';


interface BearState {
	bears: number
}


interface BearAction {
	action: {
		increasePopulation: () => void
		removeAllBears: () => void
	}
}


// ✨ set 함수를 통해서만 상태를 변경할 수 있음
const useStore = create<BearState & BearAction>()(set => ({
  bears: 0,
	fish: 0,
	actions: {
	    increasePopulation: (by) =>
	      set((state) => ({ bears: state.bears + by })),
	    eatFish: () => set((state) => ({ fish: state.fish - 1 })),
	    removeAllBears: () => set({ bears: 0 }),
	  },
}))


export const useBears = () => useBearStore((state) => state.bears)
export const useFish = () => useBearStore((state) => state.fish)


// 🎉 모든 액션을 사용할 수 있는 하나의 셀렉터
export const useBearActions = () =>
  useBearStore((state) => state.actions)

action은 store의 값을 업데이트하는 기능으로 정적이며 절대 변경 되지 않으므로 기술적으로 "상태"가 아니다. 이를 store의 별도 개체로 구성하면 성능에 영향을 주지 않고 모든 구성 요소에서 사용할 수 있는 단일 후크로 노출할 수 있다.

// 👾 상태를 꺼냄
function BearCounter() {
  const bears = useBears();


  return <h1>{bears} around here ...</h1>;
}


// 👾 상태를 변경하는 액션을 꺼냄
function Controls() {
const { increasePopulation, eatFish } = useBearActions()


  return (
		<button onClick={increasePopulation}>one up</button>;
		<button onClick={eatFish}>one down</button>;
	)
}