Recoil로 간단하게 전역 상태 관리하기

Recoil이란?

Recoil은 Facebook에서 만든 React 전용 상태 관리 라이브러리입니다.

• Context보다 강력하고,
• Redux보다 간편하며,
• React스럽게 설계되어 있습니다.

설치하기

npm install recoil

 

Atom: 상태를 저장하는 가장 기본 단위

 

// store/countState.js
import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

 

 

• key: 전역적으로 고유한 값
• default: 초기값

useRecoilState: 상태를 읽고 수정하기

import { useRecoilState } from 'recoil';
import { countState } from './store/countState';

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  return (
    <>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

 

 

마치 useState처럼 쓰면 됩니다.

 

RecoilRoot로 감싸기

 

import { RecoilRoot } from 'recoil';
import Counter from './Counter';

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

 

 

Selector: 파생된 상태 만들기

 

// store/doubleCount.js
import { selector } from 'recoil';
import { countState } from './countState';

export const doubleCount = selector({
  key: 'doubleCount',
  get: ({ get }) => get(countState) * 2,
});

 

import { useRecoilValue } from 'recoil';
import { doubleCount } from './store/doubleCount';

function Result() {
  const doubled = useRecoilValue(doubleCount);
  return <div>2배 수치: {doubled}</div>;
}

 

Recoil은 배우기 쉽고 구조화하기도 좋으며 React스럽게 상태 관리를 도와줍니다.

작은 프로젝트부터 대형 앱까지 무난하게 도입할 수 있는 장점이 있습니다.