설치

# npm
npm install recoil
# yarn
yarn install recoil

RecoilRoot

Recoil을 사용하기 위한 사전 설정은 Recoil상태관리가 적용될 단위에 <RecoilRoot>로 래핑하면 됩니다.

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

사용하기

Atom

• 전역적으로 상태관리가 되는 대상입니다.
• 하나의 atom을 변경하면 그것을 구독하는 모든 컴포넌트들이 리랜더링 됩니다.
• atom을 생성하기 위해선 고유한 키값과 디폴트 값을 설정해야 합니다.

import { atom } from "recoil";
export const principalState = atom({ key: "principal", default: "Jane Doe" });

Hooks

import { principalState } from "./states/atom";

const SampleIndex = ()=>{
	const [name, setName] = useRecoilState(principalState);
  	const onChange = (event) => {
    	setName(event.target.value);
    }
}

• useRecoilState : atom의 값을 구독하고 업데이트할 수 있는 훅입니다.
  - useRecoilValue : atom값의 구독만 가능한 훅입니다.
  • useSetRecoilState : atom값을 업데이트만 가능한 훅입니다.

Selector

atom이나 selector를 기반으로 값을 새롭게 구성해주는 순수함수입니다.
구독중인 atom이나 selector가 업데이트되면 함께 업데이트됩니다.

주로 값을 전처리/후처리하기 위해 사용합니다.

import { atom, selector } from 'recoil';

//
const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) =>
    set(
      tempFahrenheit,
      newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32,
    ),
});

• get은 value에 대응됩니다. get을 통해 atom값을 전처리 가능하여 반환가능합니다.
• get을 통해 다른 atom을 구독 할 수도 있습니다.
• set은 setter에 대응됩니다. set을 통해 atom값을 후처리 가능합니다.

---

Recoil-persist

페이지를 전환하거나 새로고침하면 데이터가 초기화 될 것입니다. (redux도 똑같은 문제가 있죠)
만약 페이지전환 및 새로고침에도 데이터를 유지하고 싶다면 recoil-persist를 사용하면됩니다.

설치

# npm
npm install recoil-persist

# yarn
yarn add recoil-persist

사용법

import { atom, selector } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

export const principalState = atom({
  key: "principal",
  default: 0,
  effects_UNSTABLE: [persistAtom],
});

🚨 effect_UNSTABLE은 완전한 기능이 아니라는 뜻입니다.
아직 recoil이 나온지 얼마 되지 않았기 때문에 좀 미흡한 부분이 있는데,
작은 프로젝트에선 아직까지 문제가 없는 듯합니다.