recoil이라는 상태 관리 라이브러리의 핵심 개념들에 대해서 설명하겠습니다. 그런데 개념 그 자체보단 해당 개념을 어떻게 바꿔서 이해할 수 있는지를 적어보려고 합니다.

RecoilRoot

전역 상태 관리 라이브러리는 대부분 React의 Context API를 내부적으로 활용합니다. 그래서 상위 노드에 Provider를 하나 끼워넣기 위한 컴포넌트를 제공하는데요, recoil에서는 그 컴포넌트가 RecoilRoot입니다.

참고로 일반적으로 이런 Provider들은 하위 노드에서 사용되는 API들을 위한 전역 저장소 역할을 합니다. 상위 노드에서 useState를 잔뜩 한 뒤에 Context.Provider로 값과 업데이트 함수들을 전부 아래로 넘겨주는 셈이 되죠. 근데 이러면 가독성이 너무 안 좋아지고 렌더링이 엄청나게 자주 일어나게 되기에 이를 잘 최적화해둔 전역 상태관리 라이브러리를 사용하는 것입니다.

Atom

Atom은 상태를 나타내지만 상태를 저장하고 있진 않습니다. 상태를 위한 메타데이터를 저장해둔 것이라고 보시면 됩니다.

바로 위에서 useState를 잔뜩 한 뒤에 Context API로 상태들을 넘겨주는 것과 비슷하다고 했는데, Atom 은 해당 값들을 구분하기 위한 키 역할이라고 생각하시면 됩니다.

useRecoilState

현재 컴포넌트가 특정 Atom을 사용하고, 의존성이 있다고 표현하기 위한 수단입니다. useState와 비슷하지만, RecoilRoot와 Atom이 같다면 같은 값을 가집니다. 즉, useState를 상위 컴포넌트에서 한 뒤 Context API나 Property drilling으로 넘겨준 것이랑 개념적으로 비슷합니다.

selector

recoil의 전역 상태들을 위한 useMemo입니다. 모든 값을 의존성으로 가질 수 있는 useMemo와 달리 전역 상태인 Atom만을 의존성으로 가질 수 있습니다.