[Recoil] Selectors 기본 알아보기

이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다 🎁

 

selectors는 atoms이나 다른 selectors를 입력으로 받아드리는 순수 함수이다.

 

selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 이 말은, 최소한의 상태만 atoms에 저장하고, atoms과 selectors를 조합/가공하여 파생될 수 있는 모든 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로 쓸데 없는 상태의 보존을 방지한다.

 

selector 함수 내부에서 사용하는 atoms 또는 selectors가 업데이트 되면 해당 selector 함수도 다시 실행된다.

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

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

예를들어 위 fontSizeLabelState selector의 경우, fontSizeState atom과 의존성이 있기 때문에 fontSizeState atom이 업데이트되면 fontSizeLabelState selector 함수도 다시 실행된다.

 

위 코드를 통해 selectors에 대해 좀 더 자세히 살펴보자.

 

selectors는 selector 함수를 사용해 정의한다.

get 속성은 계산될 함수다. get 함수는 get이라는 파라매터를 받는데, get 파라매터를 통해 atoms나 다른 selectors를 사용할 수 있다. get 함수를 통해 의존성이 생기면, 의존성을 갖는 atoms나 selectors가 업데이트 되었을 때, 이 함수도 다시 실행된다.

 

이렇게 정의한 selectors는 어떻게 사용할 수 있을까?

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

selectors는 atoms와 동일한 방법으로 사용할 수 있다. fontSizeLabelState selector의 경우, get 함수만 정의하여 읽기만 가능한 selector라고 할 수 있다. 읽기만 가능하기 때문에 혼란을 줄이기 위해, useRecoilValue()를 사용해 해당 selector를 사용하고 있다.(만약, selector에 set 함수도 정의했다면, useRecoilState()를 사용해 읽고 쓸 수 도 있다!)

 

만약, 위 함수에서 setFontSize() 함수를 통해 fontSizeState의 상태가 변화하면 fontSizeState atom과 해당 atom에 의존성을 갖는 fontSizeLabelState selector가 모두 다시 렌더링된다.

 

참고:

주요 개념 | Recoil

이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다 🎁