[Recoil] SelectorFamily 쉽게 사용하기

Recoil 에서 사용하는 selector의 경우
https://recoiljs.org/docs/introduction/getting-started/#selector

https://recoiljs.org/docs/basic-tutorial/selectors

Getting Started | Recoil

공식문서에도 사용방법에 대해서 간단한 예제를 통해 잘 설명되어있다.

 

selectorFamily 의 경우 같은 형태의 selector들을 여러 곳에서 다른 paramater를 가진채로 사용하고 싶을 때 적용한다.

 

아래는 그 예시이다.

// 예시로 params로 들어온 값에 1을 더하는 selectorFamily를 작성한다.
const TestSelectorFamily = selectorFamily<testValue의 type, parameter의 type>({
  key: "해당 selector family의 key",
  get:
    (params : paramter의 type) =>
    ({ get }) => {
       // params는 number라고 가정한다.
       const testValue = 1 + params
       
       return testValue;
    },
});

 

이렇게 만든 selectorFamily는 같은 RecoilRoot로 감싸진 어느 곳에서든 사용이 가능하다.

 

const addOneToHundred = useRecoilValue(TestSelectorFamily(100))
const addOneToTen = useRecoilValue(TestSelectorFamily(10))

// 101
console.log(addOneToHundred);

// 11
console.log(addOneToTen);