Recoil과 Redux 둘중 뭘 쓰면 좋을까?

Redux는 사용해 보았는데 Recoil은 들어만 보았다.

며칠전, Recoil을 사용해봤냐는 질문을 들었는데, Redux와 무슨 차이가 있는지 문득 궁금해져서 공부해보기로 했다.

Recoil이 무엇인지, Redux와는 무엇이 다른지 알아보며 다음 프로젝트때 Recoil을 사용해볼지 고민해 보는 시간을 가질것이다.

 

Redux의 단점

난 아직 Redux만 써보았기에 비교 대상이 없어 개인적으로 느낀 불편함은 초기세팅이 번거롭다는 것뿐이다.

내가 느낀 불편한 점 외에 또 어떤 단점이 있는지 알아보았다.

- React 전용 라이브러리가 아니다. React관점에서는 외부요인으로 Store가 취급되며 동시성 모드를 구현하기에 호환성이 부족하다.

- 복잡한 Boiler Plate초기세팅이 요구된다. Store, Action, Reducer 등 다양한 구성요소가 필요해 비효율적이다.

- 비동기 데이터에 추가 리소스가 요구된다. Redux-saga 등 전역상태에 비동기 데이터를 호출하기 위한 서드파티 라이브러리가 필요하다.

 

이러한 단점을 보완하고 React에 좀 더 최적화된 전역 상태관리 라이브러리로 등장한 것이 바로 Recoil이다.

 

 

 

Recoil이란

Recoil또한 Redux와 마찬가지로 리액트를 위한 상태 관리 라이브러리다. 

2020년 5월 Facebook에서 출시했고, 그렇기때문에 Redux와는 달리 React전용으로 React에 최적화 되어있다.

Recoil을 사용하면 atoms(공유 상태)에서 seclectors(순수함수)를 거쳐 React 컴포넌트로 내려가는 data flow graph를 만들 수 있다.

 

각각 역할은 이러하다.

Atoms

atom은 상태의 단위이며 값이 업데이트될때 값을 구독(subscribe)한 컴포넌트는 다시 렌더링이 된다. Atomes는 atom함수를 사용해 생성할 수 있고, 컴포넌트에서 읽고 쓰기위해선 useRecoilState라는 훅을 사용해야한다.

React의 useState와 비슷하지만 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있다.

Selectores

Selectors는 atoms나 다른 selectors를 입력으로 받아들이는 순수함수다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector함수도 다시 실행된다. Selectors는 상태를 기반으로 하는 데이터를 계산하는데 사용 되는데, 최소한의 상태 집합만 atoms에 저장하고 다른 모든 데이터는 selectors를 통해 계산함으로서 쓸모없는 상태의 보존을 방지하는 것이다. 

 

 

 

Recoil이 Redux보다 어떤 장점이 있을까

Recoil은 React전용 라이브러리이기에 React내부 접근성이 용이하다.

또, 전역상태의 설정이 쉬우며, Recoil이 지원하는 Hooks로 이를 get/set하기 때문에 React 문법과도 유사하다.

Recoil 디렉토리만 필요해서 전역상태를 사용하기 위한 Boiler Plate양이 Redux보다 적으며, hooks기반으로 매우 심플하다는 장점이 있다.

 

 

 

Recoil 설치 및 적용하기

npm install recoil
yarn add recoil

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import './index.css';
import App from './App';

ReactDOM.render(
  <StrictMode>
    <RecoilRoot>	
      <React.Suspense fallback={<div>Loading... </div>}>
        <App />
      </React.Suspense>
    </RecoilRoot>
  </StrictMode>,
  document.getElementById('root'),
);

Recoil을 사용하기 위해서는 index.js의 <App /> 컴포넌트를 <RecoilRoot>로 감싸주면 된다.

그리고, /src 폴더 내에 recoil 폴더를 만든후 이곳에 전역 상태에 관련된 Atoms, Selector들을 설정한다.

 

 

 

Recoil은 그래서

atoms(공유상태)에서 selector(순수함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. 

여기서 Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms상태값을 동기 또는 비동기 방식을 통해 변환한다. 

Recoil에서 지원하는 hooks들로 atom 혹은 selector의 get(접근) 및 set(수정)들의 다양한 동작이 가능하다.

 

 

 

다음 프로젝트때는 Recoil을 사용해보아야겠다.  오늘을 이론정도만 알았다면 프로젝트를 통해 Recoil을 직접 경험하며 더 자세히 정리해볼 것이다.