Recoil 매개 변수가 필요한 selector

Selector는 Atom이나 다른 selector에서 파생된 상태를 나타낸다.
그런데 만약 매개변수가 필요한 상태는 어떻게 해야 할까?

그럴 때 사용하는 것이 selectorFamily다.

예를 들어 내가 현재 진행하고 있는 사내 연락처 프로젝트에서 검색을 할 때는 쿼리스트링의 id 값을 참조해서 검색한다.
그리고 그 쿼리스트링을 가지고 필터링을 해서 화면상에 뿌려준다. 서버로 비동기 요청을 보낼 때 쿼리스트링이 필요한 것이다. 그런데 비동기 요청을 selector 내에서 보내기 때문에 selectorFamily를 사용해서 쿼리스트링을 매개변수로 담아준다.

const userNameQuery = selectorFamily({
  key: 'UserName',
  get: (userID) => async () => {
    const response = await myDBQuery({userID});
    if (response.error) {
      throw response.error;
    }
    return response.name;
  },
});

function UserInfo({userID}) {
  const userName = useRecoilValue(userNameQuery(userID));
  return <div>{userName}</div>;
}

function MyApp() {
  return (
    <RecoilRoot>
      <ErrorBoundary>
        <React.Suspense fallback={<div>Loading...</div>}>
          <UserInfo userID={1} />
          <UserInfo userID={2} />
          <UserInfo userID={3} />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );
}

위의 코드는 recoil공식 문서에서 제공하는 예제 코드이다.

selectorFamily의 get 함수는 중첩된 함수로 구성되어있다. 첫번째 함수의 매개변수는 selectorFamily가 받아들이는 매개변수이다. 위의 코드에서는 userID이다.
두번째 함수는 실질적인 로직이 처리되는 함수이다.