Zustand 란?

• zustand는 독일어로 '상태'를 뜻함
• 전역 상태 관리를 위한 라이브러리

장점

• API가 매우 간결하고 직관적이어서 상태를 생성하고 업데이트하는 로직을 쉽게 작성할 수 있음
• 필요한 컴포넌트만 다시 렌더링하므로 애플리케이션의 성능을 향상시킴
• React의 훅(hooks) 기반으로 동작하므로 함수형 컴포넌트에서 Zustand를 쉽게 사용할 수 있음
• Zustand는 미들웨어를 지원하므로, 로깅, 지속성 등의 추가 기능을 쉽게 구현할 수 있음

사용법

1. store라는 훅을 만들기

• store에는 원시 값, 객체, 함수 등이 포함될 수 있음
• State has to be updated immutably and the set function merges state to help it.
  • 상태는 불변성을 유지하면서 업데이트되어야 하고, set 함수는 상태를 병합하는 데 도움을 줌
  • 🧐이게 도대체 무슨 말일까?

    🗝️ 기존에는 불변성을 유지하기 위해 스프레드 연산자를 사용해서 새로운 객체로 업데이트 해줬지만, set 함수를 사용하면 그 과정을 생략할 수 있음
    Immutable state and merging 참고하기
    (상태를 불변성을 유지하면서 업데이트된다는 것은, 상태를 변경할 때 기존 상태를 직접 수정하는 것이 아니라 새로운 상태를 생성해서 교체한다는 의미입니다. 이렇게 하면 예전 상태와 새로운 상태를 명확하게 구할 수 있고, 이전 상태를 참조하거나 되돌리는 등의 작업이 수월해집니다. 불변성은 리액트의 성능 최적화와 밀접한 관련이 있습니다.
    set 함수는 Zustand에서 제공하는 상태를 업데이트하는 함수입니다. 이 함수를 통해 새로운 상태를 설정하면, 이전 상태와 새로운 상태가 병합(merge)됩니다. 병합이라는 말은, 기존의 상태 객체와 새로운 상태 객체가 합쳐져서 최종 상태를 형성한다는 것을 의미합니다. 이 때, 같은 키를 가진 값은 새로운 상태의 값으로 덮어씌워지게 됩니다. 이러한 기능 덕분에 Zustand에서는 상태를 부분적으로 업데이트하는 것이 가능합니다.)

import { create } from 'zustand'

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

• increasePopulation 함수는 set 함수를 통해 bears 상태를 1 증가시키는 역할을 함 -> set 함수에 전달된 함수의 인자로 현재 상태가 주어지며, 이 함수는 새로운 상태를 반환함
• removeAllBears 함수는 set 함수를 통해 bears 상태를 0으로 설정함

훅에 저장한 값을 꺼내서 사용하기

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