[Recoil] AtomFamily - typescript

 

Recoil에서 atom은 상태(state)를 나타내고 이렇나 atom을 관리합니다.

 

그럼 동일한 atom을 여러개 생성하고자 하면 어떻게 할까요?

그때 atomFamily를 사용합니다.

 

atom은 key에 따라서 상태가 관리됩니다.

즉, key 변경된다면 동일한 atom도 다른 상태값을 가지게 됩니다.

atomFamily를 이러한 key를 전달하여 atom을 생성할 수 있습니다.

 

---

예를 들면, InfiniteScroill과 같은 component에서는

component마다 page 번호, 도달여부(hasMore)를 가지고 있게 됩니다.

 

먼저, 아래와 같은 atom을 생성할 수 있습니다.

interface ScrollInfo {
  page: number;
  hasMore: boolean;
}

atom<ScrollInfo>({
      key: 'infinite/scrollInfo',
      default: {
        page: 0,
        hasMore: true,
      },
    }),

 

 

그러면, 다른 component에서도 동일하게 사용하게 되면, key값이 동일해서

상태관리를 각자 하지 못하게 됩니다.

 

이때 atomFamily를 통해 key를 전달합니다.

const scrollInfoSelector = atomFamily<ScrollInfo, string>({
  key: 'infinite/scrollInfo',
  default: (key: string) =>
    atom<ScrollInfo>({
      key: `infinite/scrollInfo${key}`,
      default: {
        page: 0,
        hasMore: true,
      },
    }),
});

 

실제 component에서는 아래와 같이 사용합니다.

const recoilKey = 'scrollKey'
const [scrollInfo, setScrollInfo] = useRecoilState<ScrollInfo>(scrollInfoSelector(recoilKey));