🧐 [라이브러리] 전역 상태관리 라이브러리

🌊 상태관리 라이브러리

팀원분들과 메인 프로젝트를 함께 하기로 결심하고 🔥 메인프로젝트 진입 전 스택을 미리 정하기로 하였는데 고민해야하는 부분이 상태관리 라이브러리, CSS, 번들러, 패키지 매니저 등 굉장히 많아 각자 나누어서 알아보기로 하였다. 

 

나는 전역 상태 관리 라이브러리와 비동기 상태 관리 라이브러리에 대해 알아보고자 한다. 

오늘은 우선 전역 상태 관리 라이브러리~ 

 

전역 상태관리 라이브러리

 

전역 상태 관리 라이브러리로는 Redux-toolkit과 Jotai를 고려 하고 있다. Redux-toolkit은 현업에서도 굉장히 많이 쓰이고 있고 많은 자료가 있고 Jotai는 아직은 Redux에 비해 사용량이 부족하지만 간편하게 사용할 수 있어 주목 받고 있는 라이브러리다.

 

• Redux-toolkit
• Jotai

Redux-toolkit

Redux-toolkit은 기존 Redux의 단점을 커버하기 위해 등장하였습니다. 

 

Redux의 3가지 단점

• Redux 스토어 구성이 너무 복잡하다.
• 유용한 작업을 수행하려면 많은 패키지를 설치해야 한다.
• 너무 많은 보일러 플레이트 코드가 필요하다. 
  보일러 플레이트 코드가 많으면 코드 해석이 어려워져 실수를 유발 할 수 있다.

이 단점들을 커버하기 위에 나온 만큼, Redux-toolkit은 스토어의 구성이 복잡하지 않으며, 패키지가 내장되어 있어 패키지 의존성을 줄일 수 있으며 적은 보일러 플레이트 코드로 작동합니다.

 

장점

• Redux-toolkit은 리듀서, 액션타입, 액션 생성 함수, 초기 상태를 하나의 함수로 편하게 선언할 수 있다.
• 별도의 DevTools이 존재하여 개발자는 상태 변화를 쉽게 추적할 수 있고, 액션을 디스패치 하여 현재의 상태를 확인할 수 있다. 
• 커뮤니티가 방대하고 관련 자료가 많다.
• 현업에서 가장 많이 사용 중이다.

단점

• 작은 프로젝트에서 사용하는 것은 지나친 오버헤드를 초래한다.
• 상태 로직이 단순한 경우 리액트 내부 기능인 useState와 Context API를 사용하는 것이 더 효율적일 수 있다. 

 

 

Jotai

요즘 차세대 상태관리 라이브러리로 뜨고 있는 Jotai. 기존 Recoil을 영감을 받아 제작된 라이브러리이며 미니멀 API를 지향하고 TS 기반이다. 모든 상태를 전역적으로 접근 가능하며 Context의 리렌더링 문제가 발생하지 않는다. 

 

Jotai는 atom 단위로 상태를 관리하고, 이 atom을 이용하여 state를 생성한다. 

 

장점

• 기본적으로 리렌더링 문제를 줄여주고, 리렌더링을 줄이기 '위한' 유틸도 지원한다.
• 보일러 플레이트 코드가 redux에 비해 적은 편이다.
• 리액트 기본 state 함수인 useState와 유사한 인터페이스를 가지고 있다.
• Flexible : atom끼리 서로 결합 및 상태에 관여할 수 있고 다른 라이브러리들과 원할한 결합을 지원한다.

단점

• 타 라이브러리에 비해 비교적 자료가 적다. 
• Jotai는 아직 개발 초기 단계에 있어 API가 빠르게 변화할 수 있다.

 

참고

• Jotai 공식문서
• Redux-toolkit 공식문서
• https://velog.io/@pest95/177일차-리덕스를-사용했을때-장단점-Redux-Toolkit
• https://velog.io/@pest95/redux-toolkit-장점
• https://programming119.tistory.com/263
• https://zih0.tistory.com/25
• React 최신 상태관리 라이브러리 비교하기

 

 

Redux-toolkit VS Jotai

	Redux/Redux-toolkit	Jotai
번들 사이즈	3.6kb	2.6kb
주간 다운로드 수	2,496,402	464,224
provider 여부	O	X
설정 복잡도	비교적 높음	비교적 낮음
깃허브 star	59,698/9,609	13,783
최근 업데이트	Redux - 2일전 Redux-toolkit - 2달 전	3일 전

 

결론

 

사실은 다 장단점이 있어 하나를 고르기 굉장히 힘이 드네요.

 

방대한 참고 자료가 있어 비교적 안전하게 개발할 수 있으며, 8년이라는 기간동안 끊임없이 개선되고 있고 현업에서 실제로 많이 쓰여 실무 투입될 때 도움이 되는 → Redux-toolkit

조금 더 코드를 간결하게 작성하고 싶다! 약간은 모험, 그렇지만 새로운 라이브러리를 공부하는 것에 익숙해져야 하는 개발자가 해보면 좋을 시도, 카카오 개발자도 추천하는 → Jotai

 

* 비동기 상태 라이브러리를 조사하면 추후 평이 바뀔 수 있습니다. 🧐

 

참고

• NPM Trends
• Jotai 번들사이즈
• Redux-toolkit 번들사이즈