[TIL] 240304(월) 더 쉬운 전역 상태 관리 : Zustand

전역 상태 관리

최근 몇 년 사이 많은 회사에서 redux와 redux-toolkit으로 전역상태 관리를 하였는데, 최근 더 쉬운 방법 중 하나인 Zustand가 급부상을 하고 있다.

npm trend

npm trend 분석을 해보면, 최근에 zustand의 사용량이 redux-toolkit 과 비슷하게 급부상 중이며, 그 뒤로 recoil, jotai, valtio 등이 있다고 한다.

그렇다면 zustand는 어떤 장점때문에 많은 유저들이 redux에서 zustand로 바꾸고 있는걸까?

Zustand

https://zustand-demo.pmnd.rs/

공식문서를 확인해보자.

• Zustand는 redux와 같은 flux 아키텍처로 동작한다. 즉, redux에서 했던 기능들이 zustand에서 가능하다고 볼 수 있다.
• Provider가 따로 존재하지 않는다.
• 설정이 간단하고 사용하기 쉬우며, 성능 최적화가 잘 되어 있어 대규모 애플리케이션 상태 관리를 효율적으로 만든다.

Zustand의 장점

1. 매우 간단한 API를 제공한다.
   store를 생성하고, 상태를 업데이트하며, 컴포넌트에서 이를 직관적으로 사용한다.

2. React Hook 기반으로, 함수형 컴포넌트에서 상태를 쉽게 사용할 수 있다. 마치 custom hook 처럼 사용할 수 있다.

3. 상태의 불변성을 자동으로 유지해준다. 버그를 줄이고 애플리케이션의 예측 가능성을 높인다.

4. 다양한 미들웨어와 플러그인을 지원한다.

-> 로깅, 지속성, 비동기 작업 등의 기능을 쉽게 추가할 수 있다.

5. zustand의 스토어는 모듈화가 가능하여 재사용성을 가지고 있다. 특히, 코드의 유지보수성와 확장성을 향상시킨다.

예시코드

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}