Selector

Recoil에서 함수나 파생된 상태(drived state)를 나타낸다.

Selector는 atom처럼 state가 아니라 말 그대로 파생된 state를 반환한다.

즉, drived state란, atom의 state를 입력 받아서 그걸 변형해 출력하는 순수함수를 거쳐, 반환 된 값을 말합니다.

selector 는 atom 의 상태에 의존하는 동적인 데이터를 생성 생성합니다.

selector 에서는 get 함수(필수항목)를 통해 atom 정보들을 1개이상 가져올 수 있습니다. 이를 통해 atom을 조합하여 간단히 새로운 데이터를 생성할 수 있습니다.

물론 atom 의 정보가 바뀌면 해당 atom 을 의존하는 selector 도 자동으로 리랜더링이 됩니다.

또한 한 개 이상의 atom정보를 업데이트 하도록 set 함수(선택항목)를 받을 수 있습니다.

selector 를 통해 캐싱(기본적으로 값을 캐싱함)할 수 있다.

selector로 반환 된 값은 state 자체를 변형 시키는 게 아니라, state를 사용하여 output을 변형하는 것(파생된 state를 반환) 뿐이고 그게 selector의 기능이다.

export const toDoSelector = selector({
  key: 'toDoSelector',
  get: ({ get }) => {
    const toDos = get(toDoState);
    const category = get(toDoCategory);
    return toDos.filter((toDo) => toDo.category === category);
  }
});

→ *get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환한다. set  함수 또한 제공되면 Selector는 쓰기 가능한 RecoilState 객체를 반환한다.*

const charCountState = selector({
  key: 'charCountState', *// unique ID (with respect to other atoms/selectors)*
  get: ({get}) => {
    const text = get(textState); *// textState is atom of state*

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState); *// count : 파생된 state*

  return <>Character Count: {count}</>;
}

→ *get 에서 atom의 상태 값 textState를 사용하여 파생된 상태인 charCountState를 만들 수 있고, useRecoilValue() Hook을 사용해서 charCountState 값을 읽을 수 있다.*