zustand, recoil, jotai

https://npmtrends.com/jotai-vs-recoil-vs-redux-vs-zustand

 

최근 2년간의 npm 트렌드를 보면

redux가 확실히 가장 많이 사용되고, 그 다음이 zustand, jotai, recoil 순인 것 같다.

리덕스는 13년 전에 만들어졌기 때문에 이미 사용량이 많이 축적되어있고 레퍼런스가 많으니 당연한 결과이고(기존의 있는 것들을 바꾸기 어려운 상황 등등), 그 다음으로 zustand가 많이 사용되고 있는 것은 리덕스로 이미 flux 패턴에 익숙해진 사람들이 사용하기 편리했기 때문이라는 생각이 든다. 최근 사용 추이가 가파르게 상승하고 있는 점도 눈에 들어온다.

리덕스가 압도적으로 많은 사용량을 갖고 있지만 최근 신사업이나 새로 시작하는 프로젝트에서는 많이 쓰고 있지 않다고 한다. 리덕스 세팅에 많은 허들이 있기 때문이라고.. 이미 flux 패턴에 익숙하면 zustand, 그렇지 않거나 간단히 쓰는 경우에는 jotai를 많이 사용한다고 한다.

(둘의 차이는 jotai - bottomup 방식 / zustand - topdown 방식)

서버 상태는 react query, 클라이언트 상태는 jotai 이렇게 조합해서 쓰는 경우가 많다고 한다

Flux 패턴 (redux, zustand)

데이터를 중앙 집중형 스토어에 저장하고 Action을 통해 데이터를 조작하는 패턴이다.
Flux 패턴은 사용자 입력을 기반으로 Action을 생성 하고 그것을 Dispatch에 전달하여 데이터가 모여있는 Store의 데이터를 변경하게 된다. 그 후 실제 렌더링 = View 에 반영되는 단방향의 흐름의 특성을 띄는 것이 특징이다
Flux 패턴 구조에 대한 Overview

 

Atomic 패턴 (jotai, recoil)

상태를 원자 단위 처럼 작은 단위(atom)로 나누고, 상태 갱신을 부작용 없이 관리하기 위한 패턴이다. 기존의 store 방식의 Flux 패턴과 달리 상태를 원자적으로 업데이트하게 되는 구조이다.

 

zustand

zustand document

zustand github

zustand는 발행/구독(pub/sub) 모델을 기반으로 이루어져있다. 스토어의 상태 변경이 일어날 때 실행할 함수 리스너들을 모아두었다가(sub), 상태가 변경되었을 때 등록된 리스너에게 상태가 변했다고 알려준다(pub).

zustand의 동작흐름을 간단하게 정리해보면, 스토어를 만들고 그 안에 원시 타입, 객체, 함수 등등을 넣은 다음 컴포넌트와 바인딩하면 된다. 

장점

• 낮은 러닝커브
• 다양한 미들웨어 지원
• 일시적 업데이트 가능 (상태가 자주 바뀌어도 매번 업데이트하지 않고 리렌더링 제어 가능)

단점

• IDE에서 쓸 수 있는 플러그인, 익스텐션, 스니펫이 많이 존재하지 X, 레퍼런스도 비교적 적은 편
• 성능이 중요한 앱에서 zustand 같은 탑다운 방식이 적합하지 않음

 

jotai

jotai document

jotai github

redux와 zustand가 flux 패턴을 갖는다면 jotai와 recoil은 atomic 패턴을 갖는다.

기본 단위인 아톰에 원시 타입과 객체 타입을 담을 수 있고, 다른 아톰에서 값을 가져와 만드는 것도 가능하다.

useState와 비슷하게 useAtom을 사용하여 생성한 아톰을 불러온다. (러닝 커브가 낮음)

장점

• 러닝커브가 낮다
• 리렌더링을 줄여주는 selectAtom이나 splitAtom과 같은 유틸에 대한 지원이 많다
• zustand와 반대로 바텀업(아래서부터 정의해서 큰 조각을 이루는) 형태로 설계되어 성능이 중요한 앱에서 사용된다

단점

• 사용자 수가 많지 않아 레퍼런스가 부족

 

recoil

recoil document

recoil github

 

장점

• 리액트 문법 친화적이다. 리액트의 상태처럼 간단한 get/set API를 제공해 러닝커브가 낮다.
• 비동기 처리를 추가적인 라이브러리 없이 recoil 내부에서 가능하다.
• 내부적으로 캐싱을 지원한다.

단점

• 여러 곳의 컴포넌트에서 아톰을 구독하고 업데이트를 받다보니 사이드 이펙트가 발생할 확률이 있다
• 아톰과 셀렉터가 많아지면 의존성이 여러 방향으로 엮여 파악이 어려워진다.

 

 

추가로 mobx도 redux를 제외하면 가장 많이 사용되는 상태 관리 라이브러리인데, 리액트 프로그래밍 기반이라 리액트 친화적이라고 한다. 이것도 flux 패턴과 유사한 것 같은데 조금 다른 것 같기도 하고.. 이건 나중에 더 알아봐야겠다

 

 

참고한 아티클