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 값을 읽을 수 있다.*