Recoil

2022.08.02

Recoil은 facebook에서 개발한 전역 상태 라이브러리로 상태를 작은 단위의 Atom으로 관리하여 빠르게 개발하고, 관리를 하기 쉽다.

React에서 전역 상태를 라이브러리 없이 구현하려면 Context API를 사용할 수 있는데 Context API는 부모 컴포넌트에 상태를 저장하고 자식 컴포넌트에서 해당 상태를 사용하는 과정에서 코드량이 많아지고 관리가 복잡했다.

기존에는 이러한 문제 때문에 Redux를 사용했는데 Redux는 React전용으로 개발된 상태관리가 아니였기 때문에 초기 설정이 복잡하고, 코드량이 많아지는 문제가 있었다.

이러한 문제로 Recoil을 사용하게 되었는데 Atomic하게 전역 상태를 관리하여 빠르게 개발하고 관리가 너무나도 쉬워졌다.


세팅

  1. 설치
yarn add recoil
  1. RecoilRoot 컴포넌트로 감싸기
import { RecoilRoot } from "recoil";

export const Providers = ({ children }) => {
  return <RecoilRoot>{children}</RecoilRoot>;
};

Atom

Atom은 Recoil에서 사용하는 상태의 단위이다.

import { atom } from "recoil";

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

default로 초기값을 세팅하고 key로 고유한 값을 지정한다.

import { useRecoilState } from "recoil";
import { countState } from "./atoms";

const Counter = () => {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

위와 같이 useState를 사용하는 것처럼 간편하게 값을 가져오고, 변경할 수 있다.


Selector

Selector는 Atom을 가공하여 새로운 값을 만들어낼 수 있는 함수이다.

import { selector } from "recoil";
import { countState } from "./atoms";

export const doubleCountSelector = selector({
  key: "doubleCountSelector",
  get: ({ get }) => {
    const count = get(countState);
    return count * 2;
  },
});

get함수를 통해 Atom의 값을 가져와서 가공하여 새로운 값을 만들어낸다.

import { useRecoilValue } from "recoil";
import { doubleCountSelector } from "./selectors";

const DoubleCounter = () => {
  const doubleCount = useRecoilValue(doubleCountSelector);

  return (
    <div>
      <h1>{doubleCount}</h1>
    </div>
  );
};

이때 doubleCountSelector의 경우 countState의 값을 가져와서 2배를 한 값을 가져오게 된다.

위 코드에서의 Selector는 Atom의 상태를 값을 수정하지 않고 값을 가공해서 가져오는데 원본값을 해치지 않기 때문에 데이터를 Atom에 저장하고, 컴포넌트별로 Selector를 통해 가져와서 말그대로 Atomic하게 상태를 관리할 수 있다.