너무 많은 상태관리 라이브러리! 뭐를 사용해야 할까? (feat. Recoil, Jotai, Zustand)

Recoil

- RecoilRoot를 선언해 하나의 스토어를 만들고, atom이라는 상태단위를 스토어에 등록한다. 

 

- RecoilRoot: Recoil에서 생성되는 상태값을 저장하기 위한 스토어를 생성 + 변경된 상태를 하위 컴포넌트로 전파해 컴포넌트에 리렌더링을 일으킴

- atom: 상태를 나타내는 recoil의 최소 상태 단위. 각 값은 고유한 key 값을 바탕으로 구별된다.

 

컴포넌트는 recoil에서 제공하는 훅(useRecoilValue, useRecoilState..)을 통해 상태 변화를 구독하고, 값이 변경되면 forceUpdate 같은 기법을 통해 리렌더링을 실행해 최신 atom을 가져오게 된다.

 

 

Jotai

- recoil의 atom 모델에 영감 받아 만들어진 상태관리 라이브러리

- 상향식 접근법 (작은 단위의 상태를 위로 전파할 수 있는 구조)

   : 리액트 Context의 문제점인 불필요한 리렌더링이 리어난다는 문제를 해결하고자 설계 (별도의 메모이제이션 필요없음!)

 

- atom: 최소 단위의 상태.

              atom 하나만으로도 상태를 만들 수도, 또 이에 파생된 상태를 만들수도있다.

 

	Recoil	Jotai
atom key값	필요	별도 관리 불필요 (WeakMap 방식 덕분에! store에 atom 객체 그 자체를 키로 활용하는 Map 값을 저장)
상태변화 구독하는 훅	useRecoilValue, useRecoilState	useAtomValue, useAtom
atom에서 파상된 값 만들기	selector 필요	atom 만으로 가능 ( 값뿐만 아니라 함수를 인수로 받을 수 있다는 특징이 있기 때문! )

 

 

atom 형태 상태관리를 선호하지만, Recoil은 정식 버전이 출시되지 않아 망설여질 땐 Jotai를 선택하자!

 

 

Zustand

- 리덕스에 영감을 받아 만들어진 상태관리 라이브러리

- 하나의 스토어를 중앙 집중형으로 활용해 이 스토어 내부에서 상태를 관리하는 방식

 

- store는 그 어떤 프레임워크와는 별개로 완전히 독립적으로 구성되어 있어서 순수하게 JS 환경에서도 사용가능

스토어 생성방법

1. create를 이용해 스토어 만들고 이 스토어를 useCounterSotre로 내부에서 사용

- 리액트 컴포넌트 외부에 store를 만들땐 createStore로 만들고 useStore훅으로 가져와 사용

 

리덕스에 비해 매우 간단하고 빠르게 상태를 정의할 . 수있다.

가벼운 라이브러리 크기

타입스크립트 기반이기에 별도 처리 필요없음.

미들웨어 지향(persist: 데이터 영구 보존, immer: 복잡한 객체를 쉽게 관리하도록 도와줌, ....)

 

 

상태 관리하는 방식에는 차이가 조금씩 있지만, 리액트에서 리렌더링을 일으키기 위한 방식은 제한적이기 때문에 리렌더링을 만드는 방법은 모두 비슷