[Recoil] Recoil 시작하기

Recoil이란?

React를 위한 전역 상태 관리 라이브러리이다. boilerplate 코드가 많은 Redux에 비해 boilerplate 코드가 없고, 간단한 사용 방법이 장점이다.

Recoil는 React를 위한 상태 관리 라이브러리다. 따라서 Recoil를 사용하기 위해서는 React가 설치되어 있어야 한다.

Recoil 설치

npm install recoil
// or
npm install recoil --save

Recoil 사용하기

RecoilRoot

recoil state를 사용하려면 루트 컴포넌트를 <RecoilRoot>로 감싸주어야한다. 그렇지 않으면 에러가 발생할 수 있다.

import { RecoilRoot } from 'recoil';

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

Atom

atom은 전역 상태라고 보면 된다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 렌더링 된다. 전역으로 사용할 state를 선언한다.

key는 다른 atom들과 분류되는 유니크한 id이다. key가 같으면 에러 메세지를 띄운다.
default는 이 atom을 가져다 쓸 때 기본 state가 되는 값이다.
export를 해줘야 가져와서 사용할 수 있다. 하지 않으면 에러가 난다.

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

export const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

atom과 상호작용하기 위해 가장 자주 사용되는 Hooks

useRecoilState(): atom을 읽고 쓰려고 할 때 이 Hook을 사용한다. 이 Hook는 atom에 컴포넌트을 등록하도록 한다.
useRecoilValue(): atom을 읽기만 할 때 이 Hook를 사용한다. 이 Hook는 atom에 컴포넌트를 등록하도록 한다.
useSetRecoilState(): atom에 쓰려고만 할 때 이 Hook를 사용한다.
useResetRecoilState(): atom을 초깃값으로 초기화할 때 이 Hook을 사용한다.

useRecoilState

useRecoilState는 기존 리액트의 useState처럼 사용하면 된다. 그리고 초기값으로 atom에서 정해줬던 state를 넣어주면 된다.

// atoms.js
const myCountState = atom({
  key: 'myCountState',
  default: 1,
});

// 사용하려는 컴포넌트
import { useRecoilState } from 'recoil';
import { myCountState } from '../../atoms';

const MyComponent = () => {
  const [count, setCount] = useRecoilState(myCountState);
  
  // ...

}

export default MyComponent;

useRecoilValue

값을 수정하지 않고 가져오기만 하고 싶다면 useRecoilValue로 값만 가져와 사용할 수 있다.

import { useRecoilValue } from 'recoil';

const MyComponent2 = () => {
  const count = useRecoilValue(myCountState);

  // ...

}

export default MyComponent;