이번 글에서는 recoil의 사용 방법이 아니라, recoil이 recoil을 구현한 방법을 위주로 살펴볼 예정이다.

1. Recoil ?

우선, recoil에 대해 알아보자. recoil은 페이스북에서 만든 리액트 상태관리 라이브러리이다.

아직 정식 버전인 1.0.0을 출시하지 않은 것을 확인할 수 있다. recoil팀에서는 리액트 18에서 제공되는 동시성 렌더링, 서버 컴포넌트, Streaming SSR 등이 지원되기 전까지는 1.0.0을 릴리스하지 않을 것이라고 밝힌 바 있다. 따라서, 아직 Recoil을 운영 환경에서 사용하기에는 안정성, 성능, 사용성 등이 보장할 수 없다.

하지만, recoil은 다른 상태관리 라이브러리에 비해 사용하기 쉬워 많은 사랑을 받고 있다.

Recoil의 사용법

recoil은 사용하기 간단하다.

1. RecoilRoot로 애플리케이션을 감싼다.
2. Atom을 만든다. Atom은 상태의 일부로, Atom의 값을 읽는 컴포넌트는 암묵적으로 Atom을 구독한다. Atom에 어떤 변화가 있으면 그 Atom을 구독하는 모든 컴포넌트가 리렌더링된다.
3. Selector는 atom이나 다른 selector를 입력으로 받는 순수 함수다. 입력이 된 atom이나 selector가 갱신되면 selector 함수도 다시 평가된다.
   • useRecoilValue를 이용하여 읽을 수 있다.
   • Reducer의 action과 같은 기능을 한다.
4. useSetRecoilState를 이용하여 atom값을 변경한다.

Recoil의 등장 배경

store는 ‘외부요인’으로 취급되기 때문에 React의 내부 스케줄러에 접근할 수 없다. 동시성 모드가 등장하며, 이러한 것은 중요해졌다. Redux는 강력한 기능을 제공하지만 기본적인 store 구성을 위해 많은 보일러 플레이트와 장황한 코드를 작성해야 한다. 또한 비동기 데이터 처리 또는 계산된 값 캐시와 같은 중요한 기능은 라이브러리의 기능이 아니며, 이를 해결하기 위해 또 다른 라이브러리를 사용해야 한다.

<aside> ❓ 동시성 모드가 뭔데?

2022년, 리액트 18이 발표되었다. 이는 성능 향상과 렌더링 엔진 개선에 초점이 맞춰졌다. 리액트 18은 향후 출시된 리액트 기능의 토대가 될 동시성 렌더링 API의 초석을 다졌다.

동시성이란, A를 수행하다가 대기 상태에 걸리면 B를 수행하는 것을 말한다. 여기서 동시에 수행하지 않는다는 점이다. 리액트 18 이전의 렌더링이랑 개입할 수 없는 하나의 동기적 처리였기에 한 번 렌더링이 시작되면 중단할 수 없었다. 동시성은 리액트 렌더링 메커니즘의 근본적인 개선이다. 동시성을 통해 리액트는 렌더링에 개입한다.

동시성 렌더링의 토대가 도입된 덕에 리액트 18에서는 suspense, 스트리밍 서버 렌더링, 변이 같은 새로운 기능이 소개되기도 했다.

</aside>

<aside> ❓ 리액트 18에서는 또 뭐가 업데이트 되었는데?

출처 : https://www.freecodecamp.org/korean/news/riaegteu-18yi-singineung-dongsiseong-rendeoring-concurrent-rendering-jadong-ilgwal-ceori-automatic-batching-deung/

1. Automatic Batching : 모든 상태 업데이트를 일괄로 처리
2. Transitions : 급하지 않은 업데이트 상황에서 UI 변화를 표시하는 데 쓸 수 있다
   • startTransition(callback)
3. strict mode : 이전 상태 값을 가진 컴포넌트의 mount, unmount, remount를 시뮬레이션
   • 마운팅이 해제되기 전과 같은 컴포넌트 상태를 담은 트리를 리마운트함으로써 이전 화면을 재빨리 마운트한다 </aside>