ProgrammingFrontendReact

[React] Recoil 사용 방법

, ,

Recoil 사용 방법에 대해 알아보겠습니다.

Recoil

Recoil는 페이스북에서 만든 React를 위한 상태 관리 라이브러리입니다. Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다.

설치

Recoil 패키지는 npm에 존재합니다. 안정한 최신 버전을 설치하기 위해서는 다음의 명령어를 실행하면 됩니다.

1
$ npm install recoil

또는 yarn을 사용한다면 이 명령어를 사용하면 됩니다.

1
$ yarn add recoil

RecoilRoot

루트에 RecoilRoot를 감싸줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
// index.tsx
import { RecoilRoot } from 'recoil';
import ToggleOutput from './ToggleOutput';
import ToggleButton from './ToggleButton';

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

사용

Atoms

Atoms는 상태(state)의 일부를 나타냅니다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있습니다.

atoms.ts 파일을 생성하고 Recoil의 atom function 을 사용하여 필요한 데이터를 설정합니다.
atom 은 두 가지를 요구하는데 첫 번째는 key 로 unique ID 이고 두 번째는 default value입니다.

1
2
3
4
5
6
7
// atoms.ts
import { atom } from 'recoil';

export const isToggleAtom = atom({
  key: 'isToggle',
  default: false,
});

컴포넌트가 atom을 읽게 하기 위해서는 useRecoilValue()를 다음과 같이 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
// ToggleOutput.tsx
import { useRecoilValue } from 'recoil';
import { isToggleAtom } from './atoms';

function ToggleOutput() {
  const isToggle = useRecoilValue(isToggleAtom);

  return <div>Toggle state: {isToggle}</div>;
}

컴포넌트가 atom을 쓰게 하기 위해서는 useSetRecoilState()를 다음과 같이 사용하면 됩니다.
atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ToggleButton.tsx
import { useSetRecoilState } from 'recoil';
import { isToggleAtom } from './atoms';

function ToggleButton() {
  const setToggleAtom = useSetRecoilState(isToggleAtom);

  const toggle = () => setToggleAtom((prev) => !prev);

  return (
    <div>
      <br />
      <button onClick={toggle}>Toggle Mode</button>
    </div>
  );
}

Selectors

Selectors는 devived state를 나타냅니다. devived state 란 state 를 입력받아서 그걸 변형해 반환하는 순수 함수를 거쳐 반환된 값을 말합니다.
atom의 output은 한 가지 형태이므로 조금 더 잘 써먹을 수 있는 형태로 변형해 줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export interface IToDo {
  text: string;
  id: number;
  category: 'TO_DO' | 'DOING' | 'DONE';
}

export const toDoState = atom<IToDo[]>({
  key: 'toDo',
  default: [],
});

export const toDoSelector = selector({
  key: 'toDoSelector',
  get: ({ get }) => {
    const toDos = get(toDoState);
    return [
      toDos.filter((toDo) => toDo.category === 'TO_DO'),
      toDos.filter((toDo) => toDo.category === 'DOING'),
      toDos.filter((toDo) => toDo.category === 'DONE'),
    ];
  },
});

category 값을 3개의 타입 형태로 사용할 경우 타입 별로 값을 반환하고 싶을 때 selector를 사용하여 atom에서 각각의 타입 별로 값을 분류하고 합쳐서 하나의 값으로 반환합니다.

참고

Share