React 전역 상태 관리 라이브러리를 결정하던 중 최종적으로 Jotai와 Zustand로 후보가 좁혀졌다. 두 라이브러리의 장단점과 차이에 대해 조사해 보았다.

공통점

• 개발한 회사가 같다!
• Redux에 비하면 훨씬 간단한 문법, 편리한 사용

Jotai

• Recoil과 유사한 바텀-업 방식
  • 최소 단위의 상태(Atom)를 정의하고
  • 이 상태들을 조합(Selector)하여 더 큰 상태를 만들 수 있음
• 상태를 변경하는 함수를 컴포넌트 내부에 작성 (일반 useState를 사용할 때와 같음)
• Zustand보다 더 많은 라이브러리들과의 integration을 지원함 ex) jotai-tanstack-query

Zustand

• Redux와 유사한 탑-다운 방식
  • 하나의 스토어를 가지며
  • 리액트 외부에서도 스토어에 접근할 수 있음 ⇒ 다른 JS 프레임워크에서도 사용 가능!
• 상태를 변경하는 함수가 컴포넌트와 분리됨 (외부에서 상태 값과 동시에 정의)

https://programming119.tistory.com/263

• Zustand는 단일 저장소인 반면, Jotai는 함께 구성할 수 있는 원시적인 원자들로 구성되어 있다.

  • jotai는 컨텍스트 우선, 모듈이 그 다음 / zustand는 모듈이 우선, 컨텍스트가 그 다음이 되도록 설계되었다고 함

  • 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) })),
    }))
    

  • Jotai

    import { atom } from 'jotai'
    
    const countAtom = atom<number>(0)
    

• Jotai는 원자 종속성을 통해 렌더링 최적화를 달성한다? Zustand는 selector를 사용하여 렌더링 최적화를 수동으로 적용하는 것이 좋다.

  • 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)
      // ...
    }
    

    redux의 useSelector를 사용할 때 구조 분해 할당 방식을 쓰지 않거나, 다른 방식을 사용하는 것과 비슷한 걸 말하는 듯!

    Zustand에서는 useCountStore가 될 것 같다.

  • Jotai

    import { atom, useAtom } from 'jotai'
    
    const countAtom = atom<number>(0)
    
    const Component = () => {
      const [count, updateCount] = useAtom(countAtom)
      // ...
    }
    

참고

Zustand Documentation