React의 상태관리 라이브러리, Zustand에 대한 간략 정리글.

 

https://github.com/pmndrs/zustand

 

 

 

독일어로 "상태"를 의미하는 Zustand는 React 애플리케이션에서 단순화된 Flux 패턴을 사용하는 작고 빠른 상태 관리 라이브러리이다.

hook을 기반으로 사용하는 간편한 API를 제공하며, 최소한의 보일러플레이트 코드로 사용이 가능하며, 개발자가 상태 관리를 직관적이고 쉽게 처리할 수 있도록 도와준다.

 

 

 

 

 

주요 기능 및 특징

 

1. 심플한 API:
   Zustand의 API는 매우 간단하다. 보통 1~2개의 hook만 사용하여 상태를 정의하고, 이를 컴포넌트에서 사용할 수 있다. 주로 `create` 함수와 `useStore` 훅을 사용한다.

2. 초경량:
   Zustand는 경량 라이브러리로, 크기가 작고 빠르다. React Context API 기반으로 작동하는 다른 상태 관리 라이브러리와 비교했을 때, 성능 저하가 적다.

3. 전역 상태 관리:
   Zustand는 전역 상태를 쉽게 관리할 수 있도록 해준다. 상태는 전역적으로 정의되며, 어디서든 액세스할 수 있다.

4. 미들웨어 지원:
   Zustand는 여러 미들웨어를 통해 상태 관리 기능을 확장할 수 있다. 로깅, 상태 지속성, 및 타임 트래블 디버깅 등의 기능을 추가할 수 있다.

5. React의 생태계와 통합:
   Zustand는 React와 자연스럽게 통합된다. React 훅을 사용하여 상태를 정의하고, 이를 React 컴포넌트 내에서 쉽게 사용할 수 있다.

 

 

 

 

 

 

기본 사용법

 

 

1. zustand 설치

npm i zustand

 

2. 스토어 생성

import { create } from 'zustand'

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

 

3. 컴포넌트 바인딩을 하면 완료.

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

 

 

 

 

 

 

다양한 추가 기능

 

- 미들웨어 추가:
  Zustand는 미들웨어를 통해 추가 기능을 쉽게 통합할 수 있다. 예를 들어, 로깅 미들웨어를 추가하려면 다음과 같이 할 수 있다.

  import create from 'zustand'
  import { devtools } from 'zustand/middleware'

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

 

- Persist:

Zustand는 상태를 스토리지에 저장할 수 있는 기능도 지원한다.

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

const useFishStore = create(
  persist(
    (set, get) => ({
      fishes: 0,
      addAFish: () => set({ fishes: get().fishes + 1 }),
    }),
    {
      name: 'food-storage', // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
    },
  ),
)

 

 

 

이 외에도, 다양한 기능들을 지원한다. 

 

 

 

 

이번 기회에 hook을 이용한 상태관리 공부를 위해 아래의 도서를 구매했다. 도서로 공부한 뒤, 심화과정도 정리해볼 예정이다.

 

 

 

---

 

🌸 출처 🌸

 

Zustand

pmndrs/zustand(git)