[React] 상태관리의 현재 위치 (recoil, zustand, jotai)
date
Feb 28, 2023
slug
상태관리의-현재-위치-recoil-zustand-jotai
category
Dev
status
Public
tags
Front-end
React
keywords
summary
문득 궁금해졌다. recoil, zustand, jotai 모두 상태관리 툴인데..
type
Post
Last updated
Feb 28, 2023 08:04 AM
Created time
Feb 28, 2023 06:47 AM
전역 상태관리 라이브러리가 필요한 이유?
react로 개발하는 FE개발자라면 한 번쯤 들어봤을 법한 단어 props drilling.
props drilling은 이름처럼 하위 컴포넌트에서 필요로 하는 prop을 중첩된 컴포넌트들로부터 계속해서 전달해주는 것을 의미한다.
이렇게 props drilling을 하는 깊이가 깊어지면 유지보수하기 힘든 컴포넌트가 되어버린다.
이런 문제를 해결하기 위해 전역 상태관리 라이브러리를 사용하는 것이다.
ContextAPI도 있잖아?
예전에는 이런 props drilling의 대안으로 React의 Context API도 대안으로 많이 나왔었다.
하지만, 최근에 와서는 Context API를 상태관리의 목적으로 사용하지 않는게 맞다는 주장도 나오고 있다.
의존성 주입, DI? DIP? IoC? (feat. contextAPI)ContextAPI를 사용해서 Provider로 컴포넌트들을 감싸면, 그 하위의 컴포넌트들은 Context의 값이 변경될 때 마다 리렌더링되게 된다.
따라서, ContextAPI는 상태를 관리하는 목적보다는 설정값을 전역에서 사용할 수 있는 용도 등으로 사용하는 것이 올바른 사용법인 것 같다. (theme, locale 등)
전역 상태관리 라이브러리도 ContextAPI를 쓰지 않나?
나도 최근까지 이렇게 오해를 하고 있었는데, 전혀 아닌 것 같다.
겉으로 보기엔 ContextAPI와 비슷해보이는 Provider를 필요로 해서 그렇게 착각한 것 같다.
실제로 내부 구현을 뜯어보면, 옵저버 패턴을 통해 특정 객체를 구독한 객체들에게만 변화를 알려서 변화를 주는 방식을 사용하고 있다.
현재 FE생태계에서 대표적인 상태관리 라이브러리
npm trends를 기준으로 최근 떠오른 3대장을 정리해보면 아래와 같다.
다운로드: zustand > recoil > jotai
스타개수: zustand > recoil > jotai
이슈개수: jotai > zustand > recoil (적은순서)
용량: zustand > jotai > recoil (작은순서)
최근업데이트: zustand > jotai > recoil (최신순)
앞부터 3,2,1점을 준다면 종합적으로 아래와 같은 순서로 순위를 줄 수 있을 것 같다.
- zustand (14점)
- jotai (9점)
- recoil (7점)
recoil (7점)
React의 아버지 Facebook Open Source에서 내놓은 atom단위의 상태관리 라이브러리.
Recoil에서는 공문에서 다음과 같이 설명하고 있다.
- React를 위한 상태 관리 라이브러리.
- atoms (공유상태)에서 selctor (순수함수)를 거쳐 React컴포넌트로 내려가는 data-flow graph를 만들 수 있다.
- atoms는 컴포넌트가 구독할 수 있는 상태의 단위이다.
- selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다.
세팅도 간단하고, React친화적인 문법, 코드 스플리팅이 가능하지만 현재까지도 unstable한 버전인게 아쉽고, 개발자 도구가 공식적으로 존재하지 않는다.
jotai (9점)
위에서 소개한 Recoil에서 영감을 받은 라이브러리. 그래서인지 사용방법이 매우 유사한 편.
Jotai에서는 공문에서 다음과 같이 설명하고 있다.
- recoil에서 영감을 받은 모델을 사용하여 글로벌 React 상태 관리에 대한 원자적 접근 방식을 취한다.
- 아톰과 렌더를 결합하여 빌드 상태는 아톰 종속성에 따라 자동으로 최적화된다. 이는 React 컨텍스트의 추가 재렌더링 문제를 해결하고, 메모이제이션의 필요성을 제거한다.
recoil보다도 더 간단한 세팅과 낮은 러닝커브가 돋보이는 라이브러리다. 대신 간단한 만큼 정해진 규칙이랄게 없기에 높은 자유도가 협업에서의 컨벤션 중요도를 높일 것 같다.
zustand (14점)
현재 수치상으로 가장 각광을 받고 있는 Flux패턴 라이브러리. 이 라이브러리의 메인테이너가 jotai도 만들었다.
zustand에서는 공문에서 아래와 같은 내용을 일러주었다.
- redux를 포기해야 하는 이유
- context대신 사용해야 하는 이유
- 커버에 노출된 귀여운 곰을 무시하지 말라.
이 친구도 역시 심플하며, 기존 상태관리의 근본 redux와 같은 flux패턴을 추구한다는 점이 특징이다.
그래서 뭐가 제일 좋아?
딱 하나를 짚어서 이게 제일 최고다! 라고 할 수는 없을 것 같고, 현재 진행중인 프로젝트의 상황에 따라 다를 것 같다.
각각 장단점이 있고, 상황에 맞는 라이브러리를 채택하면 좋을 것 같다.
zustand: redux와 같은 flux패턴, 꾸준한 유지보수, 높은 사용율
jotai: 잘게 쪼갤 수 있는 atomic패턴, 높은 자유도, 낮은 러닝커브
recoil: atomic패턴, 심플한 세팅, facebook의 손길, unstable 버전
참고 문헌
![[React] Zustand 동작 원리와 ExternalStore](https://ingg.dev/icons/icon-512x512.png?v=2e48b2066b9b35b5c9e370cda4189e77){kind=icon}
