Selectors 개요

• Selector 는 derived state 를 나타냅니다. derived state = state 를 입력 받아서 그걸 변형해 반환하는 순수한수를 거쳐 반환된 값

Selctors 용법

• 단지 toDoState atom 의 output 을 변형시키기 위해서는 selector 를 사용합니다.
• 기본 형태 : get function 에서 atom 을 받을 수 있습니다.

// selector example 
// atoms.tsx

import { selector } from "recoil";

...
export const toDoSelector = selector({
  key: "toDoSelector",
  get: ({ get }) => {
    const toDos = get(toDoState);
    return toDos.length;
  },
});

// 간단히 ToDoList 의 갯수르 반환해주는 함수

• 그리고 useRecoilValue 를 사용해 selector 의 아웃풋을 얻을 수 있습니다.

// using selector's output by useRecoilValue
// ToDoList.tsx

...
function ToDoList() {
  const toDos = useRecoilValue(toDoState);
  const selectorOutput = useRecoilValue(toDoSelector);
  console.log(selectorOutput);
  ...
  
// 간단하게 ToDoList 컴포넌트 사용될때마다 selectorOut의 제공

• selector 는 key 가 있고, get 이라는 method 가 있습니다.
• get 은 options 라는 인자를 받으면서 호출되는데, options 는 객체이고 그 객체에는 get function 이 들어있습니다.

현재 ToDoList 의 문제점

• toDoState atom 은 단지 배열이고 atom 의 output 을 변형시키는 건 selector
• 지금은 모든 To Do 들이 한 toDoState 에서 관리되지만, selector 를 통해서 여러개로 나누어서 관리하고 싶습니다. 각각의 카테고리로.
• atom 을 각각의 카테고리 TO_DO, DOING, DONE 으로 새로 만들기는 싫습니다.
• 무조건 모든 TO DO를 render 할 필요는 없습니다. 따라서 카테고리별로 구분해서 render 할 수 있으면 좋겠습니다.

현재 ToDoList 의 문제해결

• selector 파라미터 객체의 키값 get 을 이용하여 동일한 카테고리값의 To Do 를 묶어서 2중 배열로 반환해주는 selector 함수를 만듭니다.

// atoms.tsx

...
export const toDoSelector = selector({
  key: "toDoSelector",
  get: ({ get }) => {
    const toDos = get(toDoState);
    return [
      toDos.filter((toDo) => toDo.category === "TO_DO"),
      toDos.filter((toDo) => toDo.category === "DOING"),
      toDos.filter((toDo) => toDo.category === "DONE"),
    ];
  },
});
...

• 위의 방법을 따라서 To Do들을 잘 조작해서 원하는 방식으로 체계화 합니다.
• ToDoList 컴포넌트를 카테고리 별로 페인팅 해줄 수 있도록 작성합니다. 그리고 selector를 사용하지 않고 useRecoilValue 를 사용했던 코드를 제거해 줍니다.

//ToDoList.tsx

function ToDoList() {
  const [toDo, doing, done] = useRecoilValue(toDoSelector);
  return (
    ...
      <h2>To Do</h2>
      <ul>
        {toDo.map((toDo) => (
          <ToDo key={toDo.id} {...toDo} />
        ))}
      </ul>
      <hr />
      <h2>Doing</h2>
      <ul>
        {doing.map((toDo) => (
          <ToDo key={toDo.id} {...toDo} />
        ))}
      </ul>
      <hr />
      <h2>Done</h2>
      <ul>
        {done.map((toDo) => (
          <ToDo key={toDo.id} {...toDo} />
        ))}
      </ul>
      ...

사견 및 회고

• selector 는 앞으로 정말 자주 쓸것 같습니다. 기본 atom은 상대변경할때만 사용하고 화면에 페인팅 하는 데이터는 selector 를 통해서 정리한 후 사용할 것 같습니다.

• 블로깅(Blogging)을 시작하면서 부트캠프때 했던 내용들과 클론코딩때 했던 내용들 모두 Live 하게 바로바로 올리기로 결정하고 올리고 있었습니다.
• 근데 클론코딩도 Live 하게 바로바로 올리다 보니까 시간관리 부분에서 효율성이 너무 떨어지게 되어서 클론코딩은 Live 하게 바로 올리기보단 섹션별로 회고 하는 식으로 앞으로 올려야 될 것 같습니다.