React - Recoil 사용하기

props drilling 을 해결하기 위해 페이스북에서 만든 공식 라이브러리로 redux 대신 사용하는 상태관리 라이브러리 입니다.

atoms 기반의 상태관리를 사용하여 컴포넌트 간 상태를 유기적으로 관리할 수 있습니다.

조끔더 쉽게 말해서 redux 보다 사용하기 쉬워서 사용하는 라이브러리입니다. 대신 단점으로는 별도의 디버깅 툴이 존재하지 않습니다.

 

설치

yarn add recoil

 

설치가 완료되면, 바로 최상단 루트로 가서 recoil 을 사용하겠다라는 명시를 해주도록 합시다.

RecoilRoot 를 사용해서 최상단에 감싸주면 됩니다.

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <Main />
    </RecoilRoot>
  );
}

 

Atoms

상태의 단위로 업데이트, 구독이 가능함.

atom이 업데이트 되면서 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.

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

atom 을 이용해서 state 를 선언하며, key는 고유한 id, default 는 기본값을 셋팅할 수 있습니다.

atom 에 key 값은 절대 중복되서는 안됨!

이제 컴포넌트에서 atom 을 사용할려면 useRecoilState 훅을 사용하면 됩니다.

import { useRecoilState } from 'recoil'

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

function CountButton() {
  const [count, setCount] = useRecoilState(countState);
  return (
    <button onClick={() => setCount(count + 1)}>
      count++
    </button>
  );
}

useRecoilState 사용방법은 useState 와 동일합니다. count 로 선언해주고 set 을 이용해서 업데이트 해줍니다. 이렇게 셋팅하면 redux 와 비교했을 때 훨씬 가볍게 셋팅할 수 있는 것을 확인할 수 있습니다.

 

추가적으로 useRecoilValue 를 사용하여 atom 항목의 value 값을 사용할 수 있습니다. 현재 value 만 사용하고 싶을 때, 이용하면 될 듯 합니다. 아래와 같은 atom 이 있다고 가정해봅시다.

const todoListState = atom({
  key: 'todoListState',
  default: [],
});

 

useRecoilValue 을 이용해서 현재 atom에 있는 value 값을 가져옵시다.

const todoList = useRecoilValue(todoListState);

 

기존 todo 리스트를 기반으로 새로운 todo 아이템을 생성하기 위해서 setter만 얻기 위해서는 useSetRecoilState 를 사용하면 됩니다!

const setTodoList = useSetRecoilState(todoListState);

이제 src 밑에 recoil 폴더를 만들고 필요한 atom.js 파일을 만들어서 상태를 관리해주면 상태 관리를 좀 더 쉽게 할 수 있습니다!

 

Selectors

selector를 사용하는 것은 주로 상태의 변환, 조합 또는 계산을 위한 용도로 사용되며 key, get 을 저장해주면 됩니다.

순수 함수에 전달된 상태의 결과물로 같은 인풋이 들어오면 같은 인풋을 리턴하고, side effect가 존재하지 않는 함수입니다.

너무 어렵지 않게 생각해도 됩니다. 단순히 어떤 원본의 값이 특정 상태에 따라 변화, 계산되는 값으로 보여줘야 하는 경우, 사용하시면 됩니다.

사용방법은 아래와 같습니다.

const Selector = selector({
  key: '키값',
  get: ({get}) => {
    const 원본값 = get(원본 아톰 객체);
    return 원본 변형값;
  }
});

원본 아톰 키값을 가져와서 원본값을 가지고 온 뒤, 어떤 변형값을 get 해줍니다.

 

아래는 Selectors 예제 입니다.

그대로 복사해서 컴포넌트에 붙여넣어보시면 쉽게 아실 수 있을 겁니다.

import { atom, selector, useRecoilValue } from "recoil";

// 섭씨 온도를 저장하는 Recoil atom
const celsiusTemperatureState = atom({
  key: 'celsiusTemperatureState',
  default: 0, // 초기값은 0도로 설정
});

// 화씨 온도를 계산하는 Recoil selector
const fahrenheitTemperatureSelector = selector({
  key: 'fahrenheitTemperatureSelector',
  get: ({ get }) => {
    const celsius = get(celsiusTemperatureState);
    return (celsius * 9/5) + 32; // 섭씨를 화씨로 변환하는 공식
  },
});

// Recoil 상태를 사용하는 컴포넌트
function TemperatureComponent() {
  const celsius = useRecoilValue(celsiusTemperatureState);
  const fahrenheit = useRecoilValue(fahrenheitTemperatureSelector);

  return (
    <div>
      <p>Celsius: {celsius}</p>
      <p>Fahrenheit: {fahrenheit}</p>
    </div>
  );
}