[React] 상태 관리 라이브러리 Recoil 이해하기

 

오늘은 Recoil을 알아볼건데요, Recoil은 Facebook에서 출시한 React 스러운 상태관리 라이브러리입니다.

 

Recoil 이해하기

recoil은 react의 상태 관리 라이브러리 중 하나입니다. recoil을 사용하면 atoms(공유 state)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow-graph를 만들 수 있습니다.

Atoms란?

atoms는 (컴포넌트가 구독할 수 있는) state의 단위입니다.
selectors는 atoms의 상태값을 동기 또는 비동기 방식을 통해 변환합니다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링됩니다.

 

---

Atoms 생성하기

Atoms는 atom 함수를 사용해 생성합니다.

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

여기서 key 값은 전역적으로 고유하도록 해야합니다.

Atoms 사용하기

컴포넌트에서 atom을 읽고 쓰려면 useRecoilState 라는 훅을 사용해야 합니다.
React의 useState와 비슷하지만 state가 컴포넌트 간에 공유될 수 있다는 점에 차이가 있습니다.

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

버튼을 클리하면 글꼴 크기가 1만큼 증가합니다.
fontSizeState atom을 사용하는 다른 컴포넌트가 있다면 글꼴 크기도 같이 변화합니다.

 

---

Selectors 이해하기

Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)입니다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행됩니다. 컴포넌트들은 selectors를 atom처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링됩니다.

Selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용됩니다. 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지합니다.

 

 

Selectors 정의하기

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

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

selector의 속성인 get 속성은 계산될 함수입니다.
인자로 전달되는 {get}을 통해 atoms와 다른 selectors에 접근할 수 있습니다. 지금의 경우 get 인자를 통해 다른 atom인 fontSizeState에 접근했습니다. 다른 atoms나 selectors에 접근하면 자동으로 종속 관계가 생성되므로, 참조했던 다른 atoms나 selectors가 업데이트되면 이 함수도 다시 실행됩니다.

이 fontSizeLabelState 예시에서 selector는 fontSizeState라는 하나의 atom에 의존성을 갖고, fontSizeLabelState selector는 fontSizeState를 입력으로 사용하고 형식화된 글꼴 크기 레이블을 출력으로 반환하는 순수 함수처럼 동작합니다.

Selectors 읽기

Selectors는 useRecoilValue() 를 사용해 읽어들일 수 있습니다.
useRecoilValue()는 하나의 atom이나 selector를 인자로 받아 대응하는 값을 반환합니다.

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>
    </>
  );
}

버튼을 클릭하면 버튼의 글꼴 크기가 증가함과 동시에 현재 글꼴 크기를 반영하는 텍스트가 업데이트 되는 두 가지 작업이 수행됩니다.