[React] recoil: 리액트 상태 관리 라이브러리
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
만을 의존성으로 가질 수 있습니다.