👀상태 관리 (State Management)

Zustand

1. 간결하고 직관적인 API: Zustand는 Redux에 비해 훨씬 간단하고 직관적인 API를 제공합니다. 불필요한 보일러플레이트 코드가 없어 코드의 복잡성이 줄어듭니다.
2. 훅 기반의 사용법: Zustand는 React의 훅을 기반으로 하기 때문에 함수형 컴포넌트와 잘 어울리며, 커스텀 훅처럼 사용할 수 있어 재사용성이 높습니다.
3. Flux 아키텍처를 따르면서도 간단함: Zustand는 Redux와 마찬가지로 Flux 패턴을 따르지만, 훨씬 가볍고 간단합니다. 단일 스토어에서 상태를 관리하기에 상태 관리가 직관적입니다.
4. 러닝 커브가 낮음: Redux에 비해 Zustand는 매우 간단한 사용법을 가지고 있어 학습이 쉽고, 프로젝트에 빠르게 적용할 수 있습니다.
5. 점점 인기가 높아지는 추세: Zustand는 최근 React 생태계에서 급부상하고 있는 상태 관리 라이브러리 중 하나로, 점점 더 많은 사용자를 확보하고 있습니다.

기본 사용법

1. 스토어 생성하기:

   • create 함수를 이용해 스토어를 생성합니다.

   • 스토어 내부에는 상태와 상태를 변경하는 함수를 정의합니다.

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

2. 컴포넌트에서 스토어 사용하기:

   • 생성한 스토어를 훅처럼 사용하여 상태와 함수를 가져옵니다.

   • 상태를 구독하는 컴포넌트는 해당 상태가 변경될 때마다 자동으로 리렌더링 됩니다.

   function BearCounter() {
     const bears = useStore((state) => state.bears)
     return <h1>{bears} around here ...</h1>  
   }
   
   function Controls() {
     const increasePopulation = useStore((state) => state.increasePopulation)
     return <button onClick={increasePopulation}>one up</button>
   }

이처럼 Zustand는 Redux의 복잡성을 개선하면서도 Flux 아키텍처의 장점을 가지고 있어, 간단하고 효율적인 전역 상태 관리가 가능한 라이브러리입니다. React 프로젝트에서 Zustand를 사용한다면 쉽고 직관적으로 상태를 관리할 수 있을 것입니다.

참고

Zustand 공식 문서