Recoil 이란 무엇이고 React 와 어떻게 사용할까?

`Recoil` 이란?

React 에는 여러가지 상태관리 라이브러리가 존재한다. 대표적으로 redux, mobx 들이 있다. 또한 React 내부적으로 context 를 가지기도 한다. 마찬가지로 recoil 또한 React 의 상태관리 라이브러리 중 하나이다.

recoil 은 2020년 5월에 Facebook에서 React 전용 상태관리 라이브러리로 출시하였다. 비교적 최근에 출시하였지만 최근 생태계에 잘 스며들어 꽤 많은 사용자가 있는것 같다. 어떤 이유로 recoil 을 사용하고, 어떻게 사용해야 할 지 공부해보려고 한다.

왜 `Recoil` 을 사용할까?

첫번째로, 글로벌 상태관리 문제를 해결한다.

러닝커브가 낮다; 새로 배워야 할 원칙과 로직이 없다.

꽤 간단하게 사용할 수 있다. 가장 리액트와 비슷하다.

나는 redux 를 정말 좋아하지만, recoil 을 배우는데 시간이 많이 걸리지 않을 것 같다.

`Recoil` 의 개념들

Atoms

Selectors

새로운 것들이 아니다. 정말 빠르게 이해할 수 있다.

`Atoms`

Atoms 는 상태의 단위이며, 업데이트와 구독이 가능하다. Atoms 는 런타임에서도 생성 될 수 있다.

react 의 useState 와 유사하지만 이 상태가 다른 컴포넌트간에 공유될 수 있다는 차이가 있다.


import { atom } from 'recoil';

const age = atom({
	key: 'age',
	default: 0
});

export { age };

이제 이 atom 은 내 앱 어디서든 접근할 수 있게 된다.


import { useRecoilState } from 'recoil';
import { age } from '....';

const [ageState, setAgeState] = useRecoilState(age);

꽤 쉽게 사용이 가능하다.

`Selectors`

Selector 는 다른 atoms 나 다른 selectors 를 입력으로 받아들이는 순수 함수이다. 상위의 atoms 또는 selectors 가 업데이트 되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors 를 atoms 처럼 구독할 수 있다.

Selectors 는 상태를 기반으로 하는 파생 데이터를 계산할 때 사용된다. 최소한의 상태 집합만을 atoms 에 저장하고 다른 모든 파생되는 데이터는 selectors 에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지한다.


import { selector, useRecoilValue } from 'recoil';
import { age } from '....';

const isChild = selector({
	key: 'childage',
	get: ({ get }) => {
		const state = get(age);
		return state < 10;
	}
})

위 예시와 같이 selector 를 설정 할 수 있다.

get 속성은 계산될 함수를 의미한다. get 파라미터를 이용하여 atoms 와 다른 selectors 에 접근할 수 있다.


const [ageState, setAgeState] = useRecoilState(age);

const value = useRecoilValue(isChild);

위 예시에서 value 는 계산된 isChild 값을 나타낸다.

마무리

Recoil 을 사용하는 이유를 알아보고 간단한 예시를 작성해보았다. 정말 간단한 코드로 전역상태관리를 할 수 있다는 장점은 새롭게 react 를 배우는 사람들에겐 아주 매력적인 부분일 것 같다. 다음 포스트에서는 Recoil 을 활용한 간단한 프로젝트를 만들어 보려고 한다.