5. Reference APIs

atomFamily(options)

: atom 을 반환하는 함수를 반환합니다.

Atom Family 는 atom 의 모음을 의미합니다.

const elementPositionStateFamily = atomFamily({
  key: 'ElementPosition',
  default: [0, 0],
});

function ElementListItem({elementID}) {
  const position = useRecoilValue(elementPositionStateFamily(elementID));
  return (
    <div>
      Element: {elementID}
      Position: {position}
    </div>
  );
}

위처럼 atomFamily는 atom과 거의 동일하지만 전달한 매개변수에 따라 RecoilState를 제공하는 함수를 반환합니다.

selectorFamily(options)

: selector 함수를 반환하는 함수를 반환합니다.

atomFamily 와 비슷하게 selectorFamily 는 selector 의 모음을 의미합니다.

selector 와 유사하지만 get, set, selector의 콜백을 매개변수로 전달할 수 있다는 점이 다릅니다.

selectorFamily 유틸리티는 매개변수로 호출 할 수 있는 함수를 반환하고 selector 를 반환합니다.

const myNumberState = atom({
  key: 'MyNumber',
  default: 2,
});

const myMultipliedState = selectorFamily({
  key: 'MyMultipliedNumber',
  get: (multiplier) => ({get}) => {
    return get(myNumberState) * multiplier;
  },

  // optional set
  set: (multiplier) => ({set}, newValue) => {
    set(myNumberState, newValue / multiplier);
  },
});

function MyComponent() {
  // defaults to 2
  const number = useRecoilValue(myNumberState);

  // defaults to 200
  const multipliedNumber = useRecoilValue(myMultipliedState(100));

  return <div>...</div>;
}

useRecoilCallback(callback, deps)

: useCallback 과 비슷하지만 Recoil 상태에서 callback이 동작하도록 API를 제공합니다.

이 hook 은 비동기로 현재의 Recoil 상태를 업데이트하거나 읽기 전용 Snapshot 에 접근할 수 있는 callback 을 구축하기 위해 사용될 수 있습니다.

사용하는 경우

• 리액트 컴포넌트에서 해당 상태를 구독하지 않고 싶을 때

• 렌더링 이전에 데이터를 미리 가져오고 싶을 때 (Pre-fetching)