> For the complete documentation index, see [llms.txt](https://shindongri89.gitbook.io/recoil-todo-list/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shindongri89.gitbook.io/recoil-todo-list/1-.-about-recoil/5.-reference-apis.md).

# 5. Reference APIs

## `atomFamily(options)`

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

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

```jsx
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` 를 반환합니다.

```jsx
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](https://recoiljs.org/ko/docs/api-reference/core/Snapshot) 에 접근할 수 있는 callback 을 구축하기 위해 사용될 수 있습니다.

사용하는 경우

* 리액트 컴포넌트에서 해당 상태를 구독하지 않고 싶을 때
* 렌더링 이전에 데이터를 미리 가져오고 싶을 때 ([Pre-fetching](https://recoiljs.org/ko/docs/guides/asynchronous-data-queries#pre-fetching))