[React]RecoilJS 의 selector함수 key, set, get

selector()

key와 get 함수로 구성되어있다. get은 객체를 받아서 호출된다. 그 get function을 이용하면 selector내부에서 atom을 사용할 수 있다.(밑의 코드에서는 toDoState atom)

selector는 atom의 데이터를 받아서 원하는대로 변형시켜 출력할때 사용하며 derived state라고도 한다.

import { atom, selector } from 'recoil';

export const toDoState = atom<IToDo[]>({
  key: 'toDo',
  default: [],
});


export const toDoSelector = selector({
  key: 'toDoSelector',
  
  // (parameter) get: GetRecoilValue
  get: ({ get }) => {
    const toDos = get(toDoState);
    const category = get(categoryState);
    return toDos.filter((todo) => todo.category === category);
    /*
    return [
      toDos.filter((todo) => todo.category === 'TO_DO'),
      toDos.filter((todo) => todo.category === 'DOING'),
      toDos.filter((todo) => todo.category === 'DONE'),
    ];*/
  },
  set: ({ set }, newValue) => {
    console.log(newValue);
  },  
});

selector의 get 속성은 atom값을 받고 그 값을 변형해서 return한다. 그리고 그 return값이 바로 toDoSelector의 return 값이다.

set 속성은 selector의 atom값을 설정한다.

따라서 toDoSelector는 세 배열을 감싸고있는 하나의 배열이 된다.이 return 값은 useRecoilValue로 끌어쓸수 있다.

 const [todo, doing, done] = useRecoilValue(toDoSelector);

이 컴포넌트는 데이터를 redering할뿐 데이터를 변형시키지는 않는다.

데이터를 모으는 atom과 변형시키는 selector, 그리고 변형된 데이터를 받아서 오직 rendering하는 컴포넌트가 나누어져있다.

🪁 참고자료

https://recoiljs.org/ko/docs/api-reference/core/selector/