Recoil

페이스북에서 만든 상태 관리 라이브러리. 리액트 전용 라이브러리.

기존 라이브러리 한계점

기존의 Redux, Mobx 같은 전역 상태관리 라이브러리가 존재하고 강력하지만 store 구성을 위해 엄청나게 긴 코드를 작성해야 했다.
그리고 비동기 데이터 처리, 캐시등의 기능을 제공하지 않았으며 React 라이브러리가 아니므로 리액트 내부 스케줄러에 접근하지 못해 동시성 모드를 쉽게 해결할 수 없었다. (병렬적인 데이터 fetch)

그래서 페이스북 개발자들이 직접 라이브러리를 만들었다.

Context API 의 한계점

기존 Context API는 강력하지만 한계점이 존재한다.

1. 만약 상태가 자주 바뀐다면 비효율적으로 렌더링이 진행된다.

B,C 컴포넌트가 사용중인 상태가 공통된 상위요소 A를 통해 Context로 공유되지만 이 과정에서 거대한 트리 (A-B-C) 가 형성된다.
그래서 상태가 변경되면 A-B-C 를 이루는 거대한 트리가 다시 렌더링 되는 효과가 야기되어 버린다.

2. Context는 단일 값만 저장될 수 있다.

Context API를 사용해 봤다면 겪어본 문제이다.
Context에 apple, banana, cold 라는 상태가 저장되어 있다고 생각해 보자.
B,C 컴포넌트가 apple 이라는 상태를 사용하기 위해서는 무조건 apple,banana,cold를 함께 불러와야한다.

1,2의 문제때문에 트리의 최상단에서 부터 leaf 까지의 코드 분할이 어려워지게 된다.

Recoil 의 장점

Recoil은 앞서 말한 문제점들을 해결하고 있으며 다음과 같은 장점을 가지고 있다.

• 동시성 모드와 React 기능들과의 호환성
• 상태 정의가 분산 가능 -> 코드 분할이 가능
• 상태를 사용하는 컴포넌트를 수정하지 않고도 파생된 데이터로 대체가능
• 공유된 상태도 React local state 처럼 간단하게 get/set 인터페이스로 사용 가능

참고ㅣ공식문서