[React] Recoil로 전역 상태 관리를 하자

🚀 Recoil ? → 간결한 코드로 전역 상태 관리가 가능한 라이브러리

Recoil은 페이스북이 2020년 5월에 소개한 React 전용 상태 관리 라이브러리입니다.

상태 관리 라이브러리에는 Redux도 있었는데요. Redux는 아래와 같은 문제점을 가지고 있습니다.

 

1. React 전용 라이브러리가 아니다
2. 복잡한 보일러 플레이트 (초기 세팅)
3. 비동기 데이터에 대해서 추가 미들웨어 설치 필요

 

위와 같은 문제점을 개선하고자 Recoil이 등장하게 되었습니다.

 

Recoil의 경우 context API와 달리 전역 상태에 대한 atom을 생성하고, 해당 atom을 구독하고 있는 구성요소만 리렌더링 됩니다. 따라서 불필요한 리렌더링도 방지할 수 있습니다.

 

Atom

Recoil에서 atom은 상태 관리의 최소 단위를 의미합니다. 전역 상태로 관리하고 싶은 state를 atom으로 만들어 놓고 해당 atom을 컴포넌트에서 구독하면서 상태 관리가 가능합니다. 따라서 atom이 업데이트되면 그 atom을 구독하고 있는 컴포넌트들은 새로운 값을 반영하여 리렌더링 됩니다.

 

atom으로 state와 업데이트 함수를 가지고 오고 싶을 때 : useRecoilState(atom명)

const [state, setState] = useRecoilState(atom명)

atom으로 state만 가지고 오고 싶을 때 : useRecoilValue(atom명)

const state = useRecoilValue(atom명)

atom으로 업데이트 함수만 가지고 오고 싶을 때 : useSetRecoilState(atom명)

const setState = useSetRecoilState(atom명)

 

🚀 사용해보자

1. 라이브러리 설치

$ npm i recoil

2. App.js에서 최상위에 <RecoilRoot></RecoilRoot>를 감싸준다

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

3. atoms 폴더에 필요한 atom을 만든다

다시 atom을 기억해보면, atom은 상태를 의미합니다. 따라서 여기서 필요한 atom을 만들어주고 어떤 컴포넌트에서든 필요한 atom의 이름으로 불러와서 어디서든 해당 state와 state를 업데이트하는 함수를 사용할 수 있게 됩니다.

const atom명 = atom({ key, default })

 

ex. 📜 atoms/ui.atom.js 파일

import { atom } from 'recoil';

export const addModalAtom = atom({
  key: 'addModalAtom',
  default: false,
})

이제 addModalAtom이라는 이름으로 어디 컴포넌트에서든 default에 담겨있는 state와 그 state를 업데이트하는 함수를 사용할 수 있게 된 것입니다.

4. 사용해보자

const [state, setState] = useRecoilState(addModalAtom);

위와 같이 선언해주면 우리가 useState 사용하듯이 사용하면 됩니다.