[Zustand] 기존 라이브러리 간 비교

Zustand는 React의 많은 상태 관리 라이브러리 중 하나이다.

각 라이브러리마다 장점과 단점이 있는데, 각 라이브러리 간의 주요 차이점과 유사점을 비교하여 Redux, Valtio, Jotai, Recoil 등의 일부 라이브러리와 비교하여 Zustand에 대해 설명한다.

Zustand vs Redux

개념적으로, Zustand와 Redux는 매우 유사하며, 둘 다 불변 상태 모델에 기반을 두고 있다.

그러나 Redux는 당신의 앱이 context providers 에 래핑되어야 하며, Zustand는 providers로 감싸주지 않아도 사용이 가능

 

앱 내 렌더 최적화에 관해서는 Zustand와 Redux의 접근 방식에 큰 차이가 없습니다.

두 라이브러리 모두 selectors를 사용하여 렌더 최적화를 수동으로 적용하는 것이 좋습니다.

//Zustand
import { create } from 'zustand'

type State = {
  count: number
}

type Actions = {
  increment: (qty: number) => void
  decrement: (qty: number) => void
}

const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  increment: (qty: number) => set((state) => ({ count: state.count + qty })),
  decrement: (qty: number) => set((state) => ({ count: state.count - qty })),
}))

const Component = () => {
  const count = useCountStore((state) => state.count)
  const increment = useCountStore((state) => state.increment)
  const decrement = useCountStore((state) => state.decrement)
  // ...
}


//Redux
import { createStore } from 'redux'
import { useSelector, useDispatch } from 'react-redux'

type State = {
  count: number
}

type Action = {
  type: 'increment' | 'decrement'
  qty: number
}

const countReducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.qty }
    case 'decrement':
      return { count: state.count - action.qty }
    default:
      return state
  }
}

const countStore = createStore(countReducer)

const Component = () => {
  const count = useSelector((state) => state.count)
  const dispatch = useDispatch()
  // ...
}

 

 

Zustand vs Jotai

Zustand와 Jotai의 차이점은 크게 두 가지이다.

첫째, Zustand는 single store이고 Jotai는 함께 구성할 수 있는 primitive atoms로 구성되어 있습니다.

둘째, Zustand store은 external store이기 때문에 React 외부에서 접근이 필요할 때 더 적합합니다.

 

Jotai는 원자 의존성( atom dependency )을 통해 렌더 최적화를 달성하지만 Zustand에서는 selectors를 사용하여 렌더 최적화를 수동으로 적용하는 것이 좋다.

 

// Zustand
import { create } from 'zustand'

type State = {
  count: number
}

type Actions = {
  updateCount: (
    countCallback: (count: State['count']) => State['count'],
  ) => void
}

const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  updateCount: (countCallback) =>
    set((state) => ({ count: countCallback(state.count) })),
}))

const Component = () => {
  const count = useCountStore((state) => state.count)
  const updateCount = useCountStore((state) => state.updateCount)
  // ...
}

//Jotai
import { atom, useAtom } from 'jotai'

const countAtom = atom<number>(0)

const Component = () => {
  const [count, updateCount] = useAtom(countAtom)
  // ...
}

 

Zustand vs Recoil

Zustand와 Recoil의 차이점은 Zustand와 Jotai의 차이점과 비슷하다.

Recoil은 atom object referential identities 대신 atom string keys 에 의존합니다. 또한 Recoil은 앱을 context provider에 랩핑해야 합니다.

 

Recoil은 이전의 최적화 비교와 마찬가지로 원자 의존성( atom dependency )을 통해 렌더 최적화를 수행합니다.

반면 Zustand의 경우 selectors를 사용하여 렌더 최적화를 적용하는 것이 좋습니다.

//Zustand
import { create } from 'zustand'

type State = {
  count: number
}

type Actions = {
  setCount: (countCallback: (count: State['count']) => State['count']) => void
}

const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  setCount: (countCallback) =>
    set((state) => ({ count: countCallback(state.count) })),
}))

const Component = () => {
  const count = useCountStore((state) => state.count)
  const setCount = useCountStore((state) => state.setCount)
  // ...
}

//Recoil
import { atom, useRecoilState } from 'recoil'

const countAtom = atom({
  key: 'count',
  default: 0,
})

const Component = () => {
  const [count, setCount] = useRecoilState(countAtom)
  // ...
}