Recoil 기본 개념

React 상태 관리 라이브러리

 

 

Recoil은 Facebook에서 개발한 오픈 소스 라이브러리로, React 앱에서 상태 관리를 간단하고 유연하게 처리할 수 있게 해주는 라이브러리입니다. 이를 통해 상태 관리 코드의 가독성과 유지보수성을 향상시키고, 상태 변경에 따른 리렌더링 최적화를 제공하여 앱의 성능을 개선할 수 있습니다. 또한 비동기 처리 및 상태 파생 기능도 제공합니다.

 

📌  리코일 특징

Recoil의 특징은 크게 세 가지입니다.

 

Prop Drilling

첫째, "상태 공유의 유연함"이라는 점입니다. React 트리 구조에서 앱 상태를 끌어올렸을 때(Prop Drilling 또는 Context API) 하위에 종속된 컴포넌트가 업데이트 요구될 경우, 앱이 모두 리-렌더링 되는 문제가 있습니다.

 하지만 Recoil은 React 트리에 직교(직각을 이루어 교차)되는 형태로 존재하는 그래프로 구성되어 있기 때문에, 상태 변경은 이 그래프를 따라 React 컴포넌트로 흐르며 상태를 독립적으로 변경할 수 있습니다.

둘째, "파생된 상태와 쿼리"라는 점입니다. 독립적으로 관리되는 상태로부터 파생된 상태는 상태가 업데이트 될 때 다시 계산되고, 파생된 상태가 변경되면 React 컴포넌트는 효율적으로 리-렌더링 됩니다. 또한, Recoil은 비동기 요청도 내부적으로 처리할 수 있으며, 비동기 요청/응답 처리 후 연관된 React 컴포넌트만 효과적으로 다시 렌더링 시킵니다.

셋째, "앱 전체 상태 관찰"이라는 점입니다. Recoil은 앱 전체의 상태를 쉽게 관찰할 수 있습니다. 디버깅을 용이하게 해주며, 상태 변화를 쉽게 추적할 수 있습니다.

이러한 Recoil의 특징들은 React 앱의 상태 관리를 보다 효율적으로 할 수 있게 해줍니다.

📌 상태 관리

상태(State)란? 애플리케이션의 작동 방식을 설명하는 모든 데이터를 말합니다. 그리고 상태 관리는 시간의 흐름에 따라 상태가 변경되는 방식입니다. 상태 관리를 위해서는 다음의 기능이 필요합니다.

• 초깃값(Initial Value)을 저장할 수 있어야 합니다.
• 현재 값(Current Value)을 읽을 수 있어야 합니다.
• 값을 업데이트할 수 있어야 합니다.

 

📌 React 상태 공유 기능의 한계

React에 내장된 상태 공유 기능을 사용할 수 있지만, 다음의 한계를 가집니다.

• 컴포넌트 상태는 연관된 상위 컴포넌트까지 끌어올려야 공유 가능하며, 이 과정에서 Props Drilling 및 성능 저하 문제를 유발할 수 있습니다.
• context 를 사용해 Props Drilling 이슈를 해결하고, 컴포넌트 간 상태 공유를 보다 쉽게 구성할 수 있지만, Context는 단일 값만 저장할 수 있고 여러 값들의 집합을 담기 어렵습니다.
• React의 내장된 Props와 Context를 사용한 상태 공유만으로는, 컴포넌트 트리의 최상단에 위치한 상태를 최하단에서 사용할 때 코드 분할이 어려워집니다.  이는 상태를 끌어올리는 것으로 인해 발생하는 Props Drilling 이슈와 Context가 단일 값만을 저장할 수 있기 때문입니다.

 

 

 

참고사이트 

 

https://recoiljs.org/ko/docs/introduction/core-concepts

주요 개념 | Recoil

https://www.youtube.com/watch?v=_ISAA_Jt9kI