Recoil

JaeWoo Yu
painting_mini
Published in
3 min readMay 10, 2023

Recoil이란?

  • Facebook에서 개발한 React 애플리케이션의 상태 관리 라이브러리

React 애플리케이션에서 상태 관리를 위해서는 보통 컴포넌트의
로컬 상태나 Redux와 같은 전역 상태 관리 라이브러리를 사용합니다.
하지만 이러한 방법들은 각각의 방식으로 상태를 관리하므로,
상태 관리 코드(props drilling, etc …)가 복잡해지는 문제가 있습니다.

이러한 문제를 해결하기 위해,
React의 기능과 매우 잘 통합되는 전역 상태 관리 라이브러리입니다.
React의 기능 중 하나인 Hook을 활용하여 상태 관리를 쉽게 할 수 있으며,
코드량이 적고 직관적인 API*를 제공합니다.

*recoil에서는 useState와 매우흡사한 방식으로 전역상태를 관리하게 됩니다.

Recoil은 컴포넌트 기반 아키텍처에 맞춰 상태를 관리하기 때문에,
상태 변경에 따른 리렌더링 성능이 우수합니다. (context보다 훨씬 유리함)
또한, React의 기능과 매우 잘 통합되어 있어서,
기존의 React 프로젝트에 쉽게 적용할 수 있습니다.

적용법

일단 recoil 라이브러리 모듈을 설치해줍니다.

전역으로 사용할 상태를 recoil에서는 atom이라고 부릅니다.
이 아톰은 최소 두개의 기본값을 가져야하는데,
그것은 key와 default 입니다.
key는 해당 아톰을 식별할수있는 유니크 아이디입니다.
default는 해당 아톰이 최초생성이 될때 가지는 기본값입니다.

실제 사용법은 useRecoilState훅을 사용하여 counterState상태를 가져오고, setCounter 함수를 사용하여 상태를 업데이트합니다.

Selector

Recoil의 selector는 다른 상태에서 파생되는 상태를 관리하는 데 사용됩니다. selector는 get함수를 사용하여 파생 상태를 계산하고,
해당 상태를 반환합니다.

비동기

Recoil은 비동기 상태 업데이트를 지원하지 않지만,
비동기 작업을 처리하기 위한 패턴이 있습니다.
이를 위해 selector와 useEffect훅을 사용할 수 있습니다.

커스텀훅과 연계

--

--