프론트엔드 공부/React

Jotai VS Zustand

무우너대갈 2022. 7. 28. 16:47
반응형

이름

Jotai -  일본어로 상태

Zustand - 독일어로 상태

 

분석

Jotai -  Recoil을 닮음

Zustand - Redux를 닮음

 

상태가 위치하는 곳

Jotai -  React Component Tree 안

Zustand - React의 store 바깥

 

상태의 구성

Jotai - Atom(상향식 구조)

Zustand - 하나의 객체(하향식)

 

기술적 차이

주요 차이점 - 상태 모델

 

Jotai 

시적인 atoms(함께 구성 가능함)

useState + useContext에 의해 대체 가능

atoms은 하나의 큰 context를 공유함

 

Zustand

하나의 store(여러 독립적인 store 생성 가능)

외부에 존재하는 store(훅들이 이를 연결함)

 

언제 어떤 상태관리 툴을 이용해야 할까?

  • useState + useContext를 대체할 필요가 있을 때 => Jotai
  • state를 React 외부에서 변경할 필요가 있을 때 => Zustand
  • 코드의 분리가 중요할 때 => Jotai
  • 리덕스 개발자 도구 사용을 선호할 때 => Zustand
  • Suspense를 활용하고 싶을 때 => Jotai

 

* Suspense

  : 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 새로운 매커니즘

   (비동기적인 코드 사용시 흐름이 깨지는 것을 방지

 

 

 

출처 : https://jotai.org/docs/basics/comparison#analogy

반응형