Recoil

설치

---

npm install recoil

yarn add recoil

Atoms

---

atom

Atoms는 상태의 단위이며, 업데이트와 구독이 가능합니다.
atom이 업데이트되면 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 됩니다.
동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유합니다.

atom은 전역적으로 고유의 key와 기본값인 default를 갖습니다.

// atoms

import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark",
  default: true,
});

useRecoilState

컴포넌트에서 atom을 읽고 쓰려면 useRecoilState()라는 훅을 사용합니다. React의 useState와 비슷하지만, 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있습니다.

import { useRecoilState } from "recoil";
import { isDarkAtom } from "./atoms";

function App() {
  const [isDark, setIsDark] = useRecoilValue(isDarkAtom);
  
  return <></>;
}

useRecoilValue

컴포넌트에서 atom을 쓰지 않고 읽기만 한다면 useRecoilValue() 훅을 사용하면 됩니다.

import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./atoms";

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  
  return <></>;
}

useSetRecoilState

컴포넌트에서 atom을 쓰려면 setter 함수를 얻기 위해 useSetRecoilState() 훅을 사용할 수 있습니다.

import { useSetRecoilState } from "recoil";
import { isDarkAtom } from "./atoms";

function App() {
  const setIsDark = useSetRecoilState(isDarkAtom);
  
  return <></>;
}

Selectors

atom이나 다른 selector를 입력으로 받아들이는 순수 함수(pure function)입니다.
상위의 atom 또는 selector가 업데이트되면 하위의 selector 함수도 다시 실행됩니다.
컴포넌트들은 selector를 atom처럼 구독할 수 있으며 selector가 변경되면 컴포넌트들도 다시 렌더링 됩니다.

get

get 속성은 전달되는 get 인자를 통해 atom과 다른 selector에 접근할 수 있습니다.

예시

categoryState와 toDoState atom의 state를 이용해서 toDoSelector에서 정제된 state를 반환합니다.

import { atom, selector } from 'recoil';

export const categoryState = atom({
  key: "category",
  default: "TO_DO",
});

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

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