Recoil

설치

npm install recoil

 

기본

1. index에 RecoilRoot import하기

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
        <ReactQueryDevtools />
      </QueryClientProvider>
    </RecoilRoot>
  </React.StrictMode>
);

2. atoms.ts파일 생성

키, 디폴트

3. 데이터 설정하기

  //const todos = useRecoilValue(todoState); (불러오고 싶을 때)
  //const setTodos = useSetRecoilState(todoState); (가공하고 싶은 때)
  //위의 두 개를 아래처럼 합칠 수 있음
  const [todos, setTodos] = useRecoilState(todoState);

 

selector

리덕스의 slice같은 기능

atom을 가공해서 사용해야할 때 사용한다.

// atoms.ts

export const todoSelector = selector({
  key: "todoSelector",
  get: ({ get }) => {
    const todos = get(todoState);
    const category = get(todoCategory);
    return todos.filter((todo) => todo.category === category);
  },
});

// TodoList.tsx

  const todo = useRecoilValue(todoSelector);
  
 //...
  
  <ul>
    {todo.map((todo) => (
      <Todo key={todo.id} {...todo} />
    ))}
  </ul>

 

 

useRecoilState vs selector

selector에서 수정하는 것과 useRecoilState를 사용해 set하는 것의 차이는 없음.

다만, 같은 결과를 다른 방식으로 사용할 수 있다.

  // App.tsx
  
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const [hours, setHours] = useRecoilState(hourSelector);
  
  //...
  setMinutes(+event.currentTarget.value);
  //...

  // atom.ts
  
  export const minuteState = atom({
  key: "minutes",
  default: 0,
});
  
  export const hourSelector = selector<number>({
  key: "hours",
  get: ({ get }) => {
    const minutes = get(minuteState);
    return minutes / 60;
  },
  set: ({ set }, newValue) => {
    const minutes = Number(newValue) * 60;
    set(minuteState, minutes);
  },
});

그럼 왜 selector가 존재하는지?

atom의 경우 하나의 값을 가지고 조작을 하지만,

selector을 사용할 경우 여러 atom들의 값을 가져다가 안에서 조합해서 결과물을 만들어 낼 수 있다.