[React 상태관리 라이브러리 단순 비교] - 부제 : Recoil... 너 살아있니?

Soye Park·2023년 3월 29일
0

기술

목록 보기
6/6
post-thumbnail

리코일의 정식버전이 계속해서 안나오는 지금, 메타의 해고 인원 중 리코일 팀도 있다는 얘기를 얼핏 들었다. 이게 사실이라면 리코일의 사망선고일까?

비교적 다행스러운 점은 마이너 업데이트가 최근(3/3)에도 있었다는 점인데, 나는 마이너업데이트가 아닌 정식버전을 기다린다...

아무튼... 리코일이 무덤으로 들어간다면 어떤 상태관리 라이브러리를 써야할까 싶어 간단하게 많이 언급되는 상태관리 라이브러리들을 비교해보고자 한다.


비교 대상

Redux의 경우 워낙 유명하기 때문에 장단점을 간단하게 작성할 것이고, Zustand, Recoil, Jotai는 특징 위주로 간단하게 작성합니다.
본 포스팅은 사용성을 알려주는 것이 아닌 단순한 특징 나열 포스팅입니다.


상태관리 세계의 절대 지분, Redux

장점

1.압도적인 사용층을 가진다.
거대한 규모의 커뮤니티는 문제상황을 직면했을 때 더 수월한 문제해결을 가능케 한다.
2. 다양한 미들웨어를 제공한다. (또는 제공당한다 ㅋㅋ)
Redux Devtool과 같은 강력한 성능의 디버깅툴을 사용 가능하다.

단점

1. 압도적인 보일러플레이트의 양...
이런 큰 규모의 보일러플레이트는 아무래도 개발을 하면서 짜증을 유발할 수 밖에 없다. 귀찮고 복잡하고. 이는 RTK(Redux Tool Kit)이 나온 현재까지도 다른 최신의 상태관리 라이브러리에 비해 단점이 된다.
2. 서버 상태에 대한 관리가 까다롭다
기존에는 Redux-saga라는 미들웨어를 통해 서버관리를 했고 이게 러닝커브를 한층 더 높이는 계기가 되었다. 그래도 지금은 Redux + React-query 조합이 성행하면서 단점이라고 얘기하기에는 조금 희석된 감이 있지만, 이미 Redux + Redux-saga로 구현되어있는 페이지라면 머리가 아플 수 밖에 없다.
3. 번들 사이즈가 크다
타 라이브러리 대비 100배에 달하는 크기의 번들사이즈를 자랑한다.


Redux의 복잡함이 싫어요, Zustand

특징

1. Redux와 비교하여 적은 보일러 플레이트
Redux의 단점으로 압도적인 보일러플레이트의 양을 꼽았는데, Zustand에서는 이 보일러플레이트가 정말 적다. 이 때문에 초기설정 부분에서 굉장히 간편할 수 밖에 없다.
2. 단순한 사용방법
Redux의 경우 action이니 selector니 dispatch니 store니 등등 굉장히 많은 것들을 알고 설계해야했다. (사실 크게 복잡한 건 아니지만 뭐든 많으면 복잡해 보이니까. ㅎ_ㅎ) 반면 zustand는 create 함수를 통해 store를 생성하고 스토어 내부에는 객체 다루듯 state나 함수들을 작성해주면 된다.
3. Redux devtool 사용가능
리덕스의 장점으로 Redux Devtool(과 같은 미들웨어)을 꼽았는데 zustand에서는 이 역시 사용가능하다.
4. Redux와 같은 Flux 패턴을 기반
이것은 기존 리덕스 사용자들이 쉽게 Zustand를 사용할 수 있는 이유이기도 한데, Redux의 기반 컨셉인 Flux패턴을 그대로 가지고 간다는 점 역시 Zustand의 특징이다.
5. TS로 작성됨
Zustand는 소스코드가 TS로 작성되었다.
6. Provider 태그로 감싸지 않아도 됨
Redux나 Recoil 등의 상태관리 라이브러리는 Provider로 꼭 감싸줘야한다는 번거로움이 있으나 Zustand는 Provider 태그로 감싸줄 필요가 없다.


Atomic 기반 대기업 라이브러리, Recoil

특징

1. Atomic 기반의 상태관리 라이브러리
기존 Redux (또는 Zustand)와 같은 Flux 패턴의 상태관리 라이브러리와는 달리 Recoil은 Atomic 패턴 기반으로 제작되었다. 이로인해 atom이라는 최소단위를 활용해 bottom-up 방식으로 데이터가 흐른다.
2. React의 문법을 닮음
Recoil은 마치 React의 Hook을 사용하는 것과 같은 사용성을 제공해준다. 많이 사용하는 React Hook인 useState와 유사한 useRecoilState처럼 혹은 useRecoilValue 와 같은 네이밍은 사용경험 향상에 일조한다.
3. JS기반으로 작성됨
Recoil은 최신의 다른 상태관리 라이브러리와는 달리 JS로 작성되었다. 이로인해 TS로 작성된 다른 상태관리 라이브러리(Jotai, Zustand)보다 안정성이 떨어지진 않을까 하는 우려들을 가지고 있다.
4. 베타 이후로 넘어가지 않는 중..
비교적 최근 마이너 업데이트가 있었으나 여전히 베타버전에서 벗어나지 못하고 있다. 엎친데 덮친 격으로 Meta의 Recoil팀을 해체하고 해고하는 수순을 밟고 있다는 소식이 들려오기에 계속 사용해도 되는 걸까 하는 불안감이 있는 상태.
5. Recoil만으로 클라이언트 단에서 비동기 처리가 가능
Recoil은 자체적으로 클라이언트에서 비동기 처리를 지원한다.


Recoil을 꿈꿨어요. 하지만 난, Jotai

특징

1. Recoil을 모티브로 한 상태관리 라이브러리
Jotai 홈페이지를 들어가자마자 반기는 문구는 Jotai가 Recoil에 영감을 받은 모델을 사용하고 있다는 문구이다. 이 말을 해석하면 말그대로 Atomic 패턴을 활용한 상태관리 라이브러리라는 말.
2. 굉장히 단순한 문법, 그리고 패키지 작은 패키지 크기
Jotai의 패키지 크기는 800kb 정도 이다. 2mb 가량의 Recoil보다도 작으며, 문법 또한 useAtom을 활용한 아주 간단한 문법이다. 보일러 플레이트 역시 적다.
3. SSR에 대한 지원
가장 활발한 React 프레임워크인 Next.js는 SSR을 위해 다뤄지는 경우가 많다. 이에 대해 Jotai는 SSR을 공식적으로 지원(언급)하고 있다.
4. TS로 작성됨
역시나 Recoil과 다르게 TS로 작성되었다.


내 선택..?

만약 Recoil을 사용할 수 없는 상태가 된다면 내 선택은 Jotai 일 듯 하다. Jotai, Zustand 두가지는 Flux패턴을 선호하냐, Atomic 패턴을 선호하냐에 따라 결정하면 될 듯 하고, atomic 패턴이 좋아 Recoil을 사용했으므로 Jotai가 당연히 나에게는 더 선호되는 선택지 일 수 밖에 없다.

아 Redux와 Zustand 중 선택하라고 하면 당연 Zustand..

아무튼 Recoil과는 달리 Jotai, Zustand 모두 활발하게 업데이트가 진행이 되고 있는 라이브러리이므로 잘알아보고 기술을 선택하면 된다 싶다.

마치며...

정말 단순한 간단 비교이고 특징적인 부분만 정리했다. 공식문서들을 참고했고 작성하면서 틀리거나 놓친 부분이 혹여나 있을 수 있는데 발견되면 수정하겠다.

profile
응애FE개발자/ 블로그 이전 : https://soyeah-log.vercel.app/

0개의 댓글