Recoil

리코일이란

• atoms(공유상태)에서 selectors(순수함수)를 거쳐 react 컴포넌트로 내려가는 data-flow graph를 만든다. atoms는 컴포넌트가 구독할 수 있는 상태의 단위이며, selectors는 atoms 상태 값을 동기 또는 비동기 방식으로 변환한다.

Atoms

• 상태의 단위
• 업데이트 및 구독 가능.
• atom 업데이트 되면 구독된 컴포넌트는 새로운 값을 반영해 리렌더링된다.
• React의 로컬 컴포넌트의 상태 대신 사용 가능하다.
• 동일한 atom이 여러 컴포넌트에서 사용 시 모든 컴포넌트가 상태를 공유한다.

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

key

=> 모든 atoms의 map을 볼 수 있는 특정 고급 API에 사용되는 고유한 키

useRecoilState

React의 useState와 비슷하지만, 상태가 컴포넌트 간 공유된다.

Selectors

• atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)
• 상위의 atoms나 selectors 업데이트되면 하위의 selector함수도 다시 실행된다.
• 컴포넌트는 selectors를 구독할 수 있고 selectors가 변경되면 컴포넌트도 리렌더링된다.
• 최소한의 상태 집합만 atoms에 저장하고 다른 모든 파생 데이터는 selectors에 명시한 함수로 계산하여 쓸모없는 상태의 보존을 방지한다.

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

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

get

=> 계산될 함수. get인자로 atoms와 다른 selectors에 접근한다.
위의 예시에선 selector가 fontSizeState 라는 하나의 atom에 의존성을 가진다. selector에는 fontSizeState를 입력으로 사용하고 fontSize를 출력으로 반환하는 순수함수처럼 동작한다.

selector는 useRecoilValue()로 읽을 수 있다. 하나의 atom이나 selector를 인자로 받아 대응하는 값을 반환한다. 위의 예시에서는 selector가 writable하지 않으므로 사용하지 않는다.

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