References

https://recoiljs.org/ko/

https://velog.io/@katanazero86/redux-recoil-내용-정리

 

 

Recoil이란?

React 기반 전역 상태관리 라이브러리로 기존 Context API의 기능적 한계를 보완하기 위한 목적으로 생겼다.

 

 

Recoil과 Redux의 차이점

Redux

Redux의 경우 Flux 아키텍쳐 기반으로 데이터 흐름을 가진다.

가장 먼저 Type과 Payload를 가진 Action을 생성하여

이를 Dispatcher에게 전달하고 여러 Action들의 상태 값을 가진 Store에게 전달한 뒤,

Store 내부의 상태 값이 변경되면 View 단에게 업데이트 상황을 알려주어 이를 리 렌더링하는 구조를 가진다.

따라서, 중앙 집중식으로 Store를 관리하여 전역적인 상태 관리가 이루어지기에 프로젝트의 규모가 커질수록 안정적일 수 있으나, 그만큼 불필요한 렌더링 등 성능 이슈가 생길 수도 있다.

 

Recoil

Recoil의 경우 Atomic 모델 기반의 데이터 흐름을 가진다.

Atoms라는 가장 작은 단위 상태를 지정하여 필요한 컴포넌트가 있을 때만 별도로 구독한 뒤 이를 가져오기만 하여 전역적으로 사용하는 형태이다.

또한, Selectors란 순수 함수를 통해 캐싱하는 기능도 있어 여러 Atoms 와의 조합 등 세부적인 요소를 기대할 수 있다.

따라서, 필요한 상태 값이 있을 때만(구독) 이를 가져와 렌더링을 하는 구조이기에 성능에 이점을 챙길 수 있으나, Redux와 달리 다양한 기능 지원이 아직 부족하기 때문에 안정성을 꾀하기엔 아직 시간이 필요할 것으로 보인다.

'Self-Study > React' 카테고리의 다른 글

[Nextjs] 14버전 정리  (0) 2023.10.30
[React] React의 라이프사이클  (0) 2022.10.13
[React] Next.js의 기본 개념  (0) 2022.10.06
[React] Redux의 기본 개념  (0) 2022.10.06
[React] Router  (0) 2022.05.05