Recoil

1. Recoil이란?

• Facebook에서 발표한 라이브러리로 react를 위한 상태관리 라이브러리
• Recoil을 사용하면 atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있음
• Atoms는 컴포넌트가 구독할 수 있는 상태의 단위
• Selectors는 atoms 상태 값을 동기 또는 비동기 방식을 통해 변환

2. 주요개념

(1) Atoms

• atoms는 상태의 단위이며, 업데이트와 구독이 가능
• atom이 업데이트되면 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.
• atoms는 atom함수를 사용해 생성한다.

import {atom} from "recoil";

// 전역상태관리를 위한 변수
export const fontSizeState = atom({
  key: 'fontSizeState', // 내부적으로 atom을 식별하는데 사용됨
  default: 14, // atom의 초기값
});

• 컴포넌트에서 atom을 읽고 쓰려면 useRecoilState라는 훅 사용 (React의 useState와 비슷하지만, 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있음)

import { useRecoilState } from 'recoil';

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

=> 버튼을 클릭하면 버튼의 글꼴크기가 1만큼 증가하며, fontSizeState atom을 사용하는 다른 컴포넌트의 글꼴 크기도 같이 변함

(2) Selectors

• selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수
• 상태를 기반으로 하는 파생데이터를 계산하는데 사용
• atoms을 이용하여 값을 계산하고 반환
• 다양한 atoms를 조합하거나 가공하여 새로운 값 반환
• selectors는 selector함수를 사용해 정의

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

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

=> get 속성은 계산될 함수. 전달되는 get인자를 통해 atoms와 다른 selectors에 접근할 수 있음.

• selectors는 useRecoilValue()를 사용해 읽을 수 있음

import { useRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

3. 사용방법

(1) 설치

npm install recoil

yarn add recoil

(2) RecoilRoot
리코일 state를 사용하는 컴포넌트들은 <RecoilRoot> 를 필요로 함
<RecoilRoot> 를 사용하기에 가장 좋은 곳은 root component

import Router from "./shared/Router";
import {RecoilRoot} from "recoil";

function App() {
    return (
        <RecoilRoot>  // 이런식으로 감싸주기
            <Router />
        </RecoilRoot>
    );
}

export default App;