[Recoil] Recoil 시작하기

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

 

리코일 설치

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

 

RecoilRoot

recoil state를 사용하려면 어딘가의 부모 컴포넌트에서 RecoilRoot로 감싸주어야한다.

import { RecoilRoot } from 'recoil';

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

 

Atom

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

// 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)
});

key는 다른 atom들과 분류되는 유니크한 id이다. key가 같으면 에러메세지를 띄운다.

default는 이 atom을 가져다 쓸 때 기본 state가 되는 값이다.

export를 해줘야 가져와서 사용할 수 있다. 하지 않으면 에러가 난다.

 

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;