[ React ] Recoil 이란

Recoil 이란?

Recoil 은 많은 상태 관리 라이브러리 중 하나로, Facebook 에서 만든 상태 관리 라이브러리입니다.
Facebook 은 React 를 만든 회사이기 때문에, React 에서 사용하기 쉽도록 만들어졌습니다.
가장 중요한 개념은 atom 과 selector 입니다.
atom 은 하나의 상태를 의미하고, selector 는 atom 의 상태를 기반으로 계산된 상태를 의미합니다.

Atom

Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.

Atom 은 상태의 단위입니다. 해당 Atom 의 상태가 변경되면, 해당 Atom 을 구독하고 있는 컴포넌트들은 다시 렌더링 됩니다.
또 여러 개의 컴포넌트에서 같은 Atom 을 사용할 수 있습니다.
아래는 Atom 의 기본적인 형태입니다.

import { atom } from "recoil";

const textState = atom({
  key: "textState", // unique ID (with respect to other atoms/selectors)
  default: "", // default value (aka initial value)
});

atom 의 key 는 고유해야 하며, default 는 초기값입니다. 이후에는 아래와 같이 사용할 수 있습니다.

import { useRecoilState } from "recoil";

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Atom 으로 전역 상태로 만든 textState 를 useRecoilState 를 통해 가져옵니다.

Selector

Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다.

Selector 는 atom 이나 다른 selector 를 입력으로 받아들이는 순수 함수입니다.
구독중인 atom 이나 selector 가 업데이트되면 하위의 selector 함수도 다시 실행됩니다.

Recoil 에서 Loadable 의 개념

Loadable 객체는 React atom 혹은 selector의 비동기 상태를 나타낸다. 이 상태는 사용가능한 값을 가지고 있거나, 에러를 가지고 있거나, 아직 로딩중인 상태를 나타낸다.

Loadable 은 Recoil 에서 비동기 상태를 나타내는 객체입니다.
Loadable 은 세 가지 상태(state)를 가집니다.

• hasValue : 값이 존재하는 상태
• hasError : 에러가 발생한 상태
• hasLoading : 로딩중인 상태

간단하게 사용법은 아래와 같습니다.

function MyComponent() {
  const myLoadable = useRecoilValueLoadable(mySelector);
  switch (myLoadable.state) {
    case "hasValue":
      return <div>{myLoadable.contents}</div>; // 값이 있을 때 보여줄 컴포넌트
    case "hasError":
      throw myLoadable.contents; // 에러를 던져줍니다.
    case "loading":
      return <Spinner />; // 로딩중일 때 보여줄 컴포넌트 (돌아가는 로딩바 등)
  }
}

위와 같이 사용하면 로딩중일 때는 로딩바를 보여주고, 에러가 발생하면 에러를 던져주고, 값이 있으면 값을 보여줍니다.

Recoil 에서 비동기로 데이터를 가져올 때 state 를 어떻게 관리하는가?

Recoil은 비동기 상태를 관리하기 위해 Suspense를 사용한다. Suspense는 React의 새로운 기능으로서, 컴포넌트가 로딩중일 때 보여줄 컴포넌트를 지정할 수 있게 해준다.

Recoil 에서 비동기로 데이터를 가져올 때는 Suspense 를 사용합니다. Suspense 는 React 의 새로운 기능으로서, 컴포넌트가 로딩중일 때 보여줄 컴포넌트를 지정할 수 있게 해줍니다.

Redux vs Recoil

• Redux 는 하나의 store 에 모든 상태를 저장하고, Recoil 은 atom 이라는 상태를 저장하는 공간을 여러 개 만들어서 사용합니다.
• Recoil 은 Redux 에 비해 보일러 플레이트 코드가 적기 때문에 더 코드가 간단해진다는 장점이 있습니다.
• Redux 는 비동기 상태를 관리하기 위해 redux-thunk, redux-saga 등의 미들웨어를 사용해야 하지만, Recoil 은 Suspense 를 사용하기 때문에 별도의 미들웨어를 사용하지 않아도 됩니다.

Reference

• Recoil 공식 문서
• Recoil 정복기
• Recoil 이란
• Recoil - 또 다른 상태관리 라이브러리?