# 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))


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shindongri89.gitbook.io/recoil-todo-list/1-.-about-recoil/5.-reference-apis.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.