Recoil
Recoil은 react-redux와 더불어 react의 중앙 전역 상태 관리를 지원해주는 라이브러리이다. 컴포넌트 간에 상태를 공유하고 상태 변경을 추적하는 데 사용된다. 다른 라이브러리와 달리 recoil은 react와 같은 facebook에서 개발한 상태 관리 라이브러리로, 자연스러운 react 개발 패턴을 유지하면서 보다 안정적인 상태를 관리할 수 있도록 설계되었다.
그동안 react를 만든 facebook은 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 react 자체에 내장된 상태 관리 기능을 사용하는 것을 권장했다. 그러나 react 다음과 같은 한계가 있어 자체적으로 상태 관리 라이브러리를 개발하였다.
- 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유될 수 있으며, 이 과정에서 거대한 트리가 다시 렌더링 되는 효과를 야기하기도 한다.
- Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값의 집합을 담을 수는 없다.
- 이 두 가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 말단(state가 사용되는 곳)까지의 코드 분할을 어렵게 한다.
특징
다음은 recoil의 공식 문서에서 강조하는 recoil의 특징이다
-
Minimal and Reactish
recoil은 react처럼 작동하고 생각한다. 앱에 추가하여 빠르고 유연한 공유되는 상태를 경험할 수 있다. -
Data-Flow Graph
파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리된다. -
교차하는 앱 관찰
코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소를 구현한다.
목적
다음은 recoil의 공식 문서에서 강조하는 recoil의 목적과 접근방식이다
-
공유상태(shared state)도 react의 내부상태(local state)처럼 간단한 get/set 인터페이스로 사용할 수 있도록 boilerplate-free API를 제공한다. (필요한 경우 reducers 등으로 캡슐화할 수도 있다)
-
동시성 모드(Concurrent Mode)를 비롯한 다른 새로운 react의 기능들과의 호환 가능성도 갖는다.
-
상태 정의는 점진적이고(incremental) 분산되어 있기 때문에, 코드 분할이 가능하다.
-
상태를 사용하는 컴포넌트를 수정하지 않고도 상태를 파생된 데이터로 대체할 수 있다.
-
파생된 데이터를 사용하는 컴포넌트를 수정하지 않고도 파생된 데이터는 동기식과 비동기식 간에 이동할 수 있다.
-
전체 애플리케이션 상태를 하위 호환되는 방식으로 유지하기가 쉬우므로, 유지된 상태는 애플리케이션 변경에도 살아남을 수 있다.
설치
recoil의 설치 및 초기화는 매우 간단하다.
-
npm 설치
npm i recoil -
ES6 환경 세팅
recoil은 ES6부터만 지원한다. Map, Set 타입에 의존하기 때문이다. -
react의 최상단 부모 트리에 다음과 같이
<RecoilRoot />를 감싸준다.
root.render(
<RecoilRoot>
<App />
</RecoilRoot>
);