Zustand 사용법

기존 프로젝트에 적용했던 Zustand 부분을 다시 공부하며 새로 알게된 부분을 말해본다~!

💡비효율적인 방법: exported - 전체 스토어를 전달

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

//차이점
export default useBearStore;

// 이는 해당 스토어의 어떤 부분이 변경되더라도 컴포넌트가 리렌더링이 발생한다. 
const { bears } = useBearStore()

💡효율적인 방법: exported - 선택적인 스토어를 전달

const useBearStore = create((set) => ({
  bears: 0,
  fish: 0,
  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)

// bears 상태가 변경될 때만 해당 컴포넌트가 리렌더링됩니다.
// 다른 상태가 변경되더라도 해당 컴포넌트는 영향을 받지 않습니다.
const bearState = useBears();

위의 선택전 스토어 전달을 통해 성능을 최적화하고, 불필요한 리렌더링을 줄일 수 있습니다.

액션과 상태 분리

• 액션은 스토어의 값을 업데이트하는 함수
• 액션은 정적이며 변경되지 않으므로 기술적으로 "상태"가 아닌 함수이다.

const useBearStore = create((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)​
]

//액션을 구조 분해할당하여 간편하게 사용 가능
const { increasePopulation } = useBearActions()

여러개의 작은 스토어 생성 가능

• 전체 앱에 대해 단일 스토어를 가져야 하는 Redux와 달리 Zustand는 여러 개의 작은 스토어를 가질 것을 권장
• 독립적인 스토어를 별도의 파일에 정의해야 코드의 유지보수가 간편해진다.

여러 라이브러리 지원

• persist, devtools , immer 등 지원
• 자세한 부분은 아래의 링크 참고
  👇🏻👇🏻👇🏻
  https://github.com/pmndrs/zustand

참고 사이트
https://tkdodo.eu/blog/working-with-zustand