Zustand와 Jotai

최종 수정 : 2024-05-30

Zustand와 Jotai

두 라이브러리는 각각 독일어와 일본어로 '상태'를 뜻한다. 또한, Poimandres의 카토 다이시가 메인이 되어 제작된 라이브러리들이다.

 

Zustand

Zustand는 redux에서 영감을 받아 만들어진 라이브러리이다.

비교	zustand	redux-toolkit	결과
번들사이즈	187kb	11.8mb	zustand
Provider 여부	X	O	zustand
설정 복잡도	간단	상대적으로 복잡	zustand
Transient updates	O	X	zustand

 

top-bottom 방식

 

// store.ts
import create from 'zustand';
import { devtools } from 'zustand/middleware';

interface ISotre {
  count: 0;
  increment: () => void;
  decrement: () => void;
}

const useStore = create<IStore>() {
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
  })),
};

export default useStore;

// counter.tsx
const Counter = () => {
  const count = useSotre(state => state.count);
  const increment = useStore(state => state.increment);
  const decrement = useStore(state => state.decrement);
  return (
    <h3>{count}</h3>
    <button onClick={increment}>Up</button>
    <button onClick={decrement}>Down</button>
  );
};

export default Counter;

---

Jotai

Jotai는 recoil에서 영감을 받아 만들어진 라이브러리이다.

비교	jotai	recoil	결과
번들 사이즈	830kb	2.17mb	jotai
Key 사용 여부	X	O	jotai
TS	O	X	jotai

bottom-top 방식

react-query 등의 라이브러리들과 쉽게 연동할 수 있다.

 

// counter.tsx
import { atom, useAtom } from 'jotai';

const countaAtom = atom(0);

const Count = () => {
  const [count, setCount] = useAtom(countAtom);
  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  
  return (
    <h3>{count}</h3>
    <button onClick={increment}>Up</button>
    <button onClick={decrement}>Down</button>
  );
}';

export default Counter;

https://young-taek.tistory.com/109

Jotai

---

결론

RTK(Redux ToolKit)보다 Zustand가 낫고, Recoil보다 Jotai가 낫다는 결론을 내릴 수 있다.

 

두 라이브러리는 영감을 받은 라이브러리가 다른 만큼 전역 상태관리의 전략이 다르다. 여기서부터는 선호도에 따른 결정이라고 말할 수 있다.

Zustand

• react 이외에서도 사용해야 하는 경우
• redux devtools를 선호하는 경우

Jotai

• useState + useContext를 대체하는 경우
• code splitting이 중요한 경우
• react suspense를 활용하고 싶은 경우

 

---

참고 자료

https://kir93.tistory.com/entry/React-%EC%B0%A8%EC%84%B8%EB%8C%80-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-Zustandredux-toolkit-vs-JotaiRecoil

React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil)