[원티드 프리온보딩] 2022.05.09

Recoil 적응기

RecoilRoot 설정

recoil은 내부적으로 contextAPI를 기반으로 한다.
recoil 역시 컴포넌트를 공급자(RecoilRoot)로 감싸줘야 한다.

import { RecoilRoot } from "recoil";

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

atoms

import { atom } from "recoil";

export const TodoListState = atom({
  key: "todoListState",
  default: [],
});

키에 고유한 값을 집어넣고, default 값을 지정할 수 있다.
TodoListState는 state와 유사하다.

import { TodoListState } from "./atom/todo";
import { useRecoilState } from "recoil";

const TodoItem = () => {
  const [todoList, setTodoList] = useRecoilState(TodoListState);

setTodoList로 state를 변경 할 수 있고, todoList값으로 조회할 수 있다.

useRecoilValue() 과 useSetRecoilState()

useRecoilState를 반으로 분리한 게 useRecoilValue와 useSetRecoilState이다.
전역 관리를 위해 값만 필요할 경우 useRecoilValue를 이용할 수 있겠다.

Selectors

export const filteredTodoListState = selector({
  key: "filteredTodoListState",
  get: ({ get }) => {
    const filter = get(TodoListFilterState);
    const list = get(TodoListState);

    switch (filter) {
      case "Show Completed":
        return list.filter((item) => item.isDone);
      case "Show Uncompleted":
        return list.filter((item) => !item.isDone);
      default:
        return list;
    }
  },
});

selector get을 이용한 todo isdone 체크 필터링

get 함수는 다른 atom이나 selector를 찾는 데 사용되는 함수이다.
위 코드는 TodoListFilterState, TodoListState가 의존성 목록에 추가되며 값이 변경되면
selector 역시 재평가된다.

selector 부분의 세터와 비동기 부분은 좀 더 공부를 해야 할 거 같다.