[React] recoil을 이용한 상태 관리

---

🎯

Recoil을 사용할 수 있다.

---

 

✅ Recoil이란?

Recoil은 React 프로젝트를 위한 많은 전역 상태관리 라이브러리들 중 하나로, 2020년 5월 Facebook에서 출시하였다. 그렇기에, 다른 라이브러리(Redux, Mobx)와는 달리 React 전용이며 React에 최적화되어 있다고 할 수 있다.

 

Recoil을 사용하면 atoms(공유 상태)에서 selector(순수 함수)를 거쳐 React component로 흐르는 data-flow graph를 만들 수 있다. 이때 atoms는 component를 구독할 수 있는 상태의 단위고 selector은 이 상태를 동기식 또는 비동기식으로 변환한다.

 

 

 

✅ Recoil을 사용하는 이유 

 

recoil이 아닌 다른 전역 상태관리 라이브러리들이 많음에도 불구하고 몇가지 단점들이 존재하였다.

 

• React 전용 라이브러리가 아니기 때문에 React 관점에선 외부요인으로 Store가 취급되며, 동시성 모드를 구현하기에 호환성이 부족하다.
• Store, Action, Reducer 등 사전에 준비해야하는 복잡한 Boiler Plate 초기세팅은 결국 비효율적이며 러닝커브가 높다.
• Redux-saga 등 전역상태에 비동기 데이터를 호출하기 위한 서드파티 라이브러리가 필요하다. 즉, 비동기 데이터에 추가 리소스가 요구된다다.

이러한 단점들을 해결하기 위해 recoil이 나타났고 가장 좋은 장점은 Boiler Plate 양이 현저히 적다는 점이다.

 

 

 

✅ Recoil 장/단점

🟢 Recoil 장점

• 비동기문제를 깔끔하게 처리할 수 있다.
  • 동기상태를 다루듯이 처리하고, 귀찮은 비동기상태 처리는 Suspense에 위임한다.
  • 코드의 복잡도를 줄일 수 있다.
• 단순하다
  • 리덕스의 action, dispatch, reducer, store, 비동기를 위한 thunk, saga... 복잡하다 
  • 리코일은 atom, selector 두개가 사실상 끝이다. 단순하다 
  • 과연 리덕스 초심자에게 리덕스를 소개할때도 이 글처럼 짧게 설명할 수 있을까? 
• 리액트와 개발 방향성이 같다
  • 2년반 전에 등장한 리액트의 hooks가 처음 나왔을때를 생각해보라
  • 처음에는 Class기반 컴포넌트에 익숙해서 거부감이 있었다.
  • 하지만 hooks가 선언적인 API로 코드를 얼마나 단순하게 바꿔주었는지 생각해보라
  • recoil은 또한번 선언적인 API로 코드를 단순하게 바꾸려 하고있다.
  • 사실 코드를 단순하게 바꾸는것 이상의 의의가 있다.
• 선언적 프로그래밍
  • 비동기처리를 위임받아 처리하는 컴포넌트를 JSX로 선언함으로써 모든 비동기 문제를 해결한다.
• 내용이 길어져 글에 담지 못한 장점들
  • 캐싱기능으로 비동기 데이터 처리를 빠르게 함
  • 상태를 분산적으로 둘 수 있기 때문에 코드 스플리팅이 가능함

🔴 Recoil 단점

• 안정성에 대한 걱정
  • 레포지토리가 facebook/Recoil이 아니고 facebookexperimental/Recoil이다.
• 실험적인 API들
  • recoil의 api중에는 아직도 _UNSAFE surfix가 붙은것이 많다
  • 하지만 빠른 속도로 UNSAFE 딱지가 떼지고 있다.
• devtools의 부재
  • 리덕스의 devtools 만큼 훌륭한 디버깅툴이 아직 없다.
  • 비공식 devtools 플러그인이 있기는 한데 퀄리티가 좋지는 않다
• 관련 오픈소스 생태계가 redux에 비해서 부족하다
  • 아무래도 redux가 오래되고 사용기업이 많다보니 관련 오픈소스가 활발하다
  • localStorage와 연동하여 상태를 유지시키는 persist 관련 라이브러리를 보자
  • redux-persist ⭐️ 12K
  • recoil-persist ⭐️ 213
    • 기능이 좀 딸린다. migration이 없다

 

 

✅ Recoil 예제를 만들기 앞서

✔ RecoilRoot 

리코일 state를 사용하는 컴포넌트들은 <RecoilRoot>를 필요로 한다.  <RecoilRoot>를 사용하는 가장 좋은곳은 root component이다.

 

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

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

export default App;

 

✔ Atom

아톰은 상태를 말하며 어떠한 컴포넌트에서 씌여지고 읽혀질 수 있다. 아톰의 밸류를 읽는 컴포넌트들은 암묵적으로 그 아톰에게 subscribe되어지고 있다. 그래서 아톰의 업데이트는 이 아톰을 참고하고 있는 컴포넌트를 re-render시킨다.

 

import { atom } from "recoil";

let countState = atom({
  key: "counter",
  default: 0,
});

export default countState;

 

✔ Selector

Recoil은 selector API를 제공한다. React의 useMemo, Redux의 selector 처럼 다른 상태를 기반으로 파생된 상태(derived state) 만들어내는 역할을 한다. 예를 들면 작업 목록에서 완료된 작업만 필터링 하고 싶을 때 사용할 수 있다.

(이번 예제에서는 recoil을 가장 간단히 나타내기 위해 생략한다.)

 

✔ useRecoilState

useState와 같은 역할이라고 봐도 될거 같다. 그러나 다른 파일에 있는 아톰을 읽을 수 있다는 점에서 useSelector와 비슷한거 같기도 하다.

다시 말해서, 아톰의 상태를 설정할 수 있고, 변경 시킬 수 도 있다.

 

✔ useRecoilValue

아톰을 조회할 때만 사용한다.

 

✔ useSetRecoilState

setter 역할을 한다. useSetRecoilState를 사용하여 아톰을 변경 시킬 수 있다.

 

✔ useResetRecoilState

아톰 값을 디폴트 값으로 변경시켜준다.

 

 

 

✅ Recoil 예제

Recoil을 이용하여 counter을 만들어 보고자 한다.

 

 

[App.js]

Recoil을 사용하기 위해서는 RecoilRoot를 감싸주어야 한다.

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

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

export default App;

 

[Atom.js]

Recoil을 통해 상태 관리를 하기 위해서 atom을 만들어준다. 이때 countState는 deafult가 0인 atom이다.

import { atom } from "recoil";

let countState = atom({
  key: "counter",
  default: 0,
});

export default countState;

 

 

[Counter.js]

 

Counter를 위한 컴포넌트이다.

여기서는 recoil을 통해 데이터를 읽기(get) 위해 useRecoilValue 를 사용하였고
데이터를 쓰기(set) 위해서는 useSetRecoilState 를 사용
default값으로 리셋하기 위해서는 useResetRecoilState 를 사용하였다.

import { useRecoilValue, useResetRecoilState, useSetRecoilState } from "recoil";
import countState from "./Atom";

function Counter() {
  const count = useRecoilValue(countState); // useRecoilValue : get only
  const handleCount = useSetRecoilState(countState); // useSetRecoilState : set only
  const handleResetCount = useResetRecoilState(countState); // useResetRecoilState : reset default

  const handlePlus = () => {
    handleCount((count) => count + 1);
  };
  const handleMinus = () => {
    handleCount((count) => count - 1);
  };
  const handleReset = () => {
    handleResetCount();
  };
  return (
    <div>
      <h2>Recoil Counter</h2>
      <div>{count}</div>
      <button onClick={handlePlus}>+</button>
      <button onClick={handleMinus}>-</button>
      <button onClick={handleReset}>reset</button>
    </div>
  );
}

export default Counter;

 

 

 

 

https://abangpa1ace.tistory.com/212

https://velog.io/@gomjellie/3%EB%B6%84-Recoil#recoil-%EB%8B%A8%EC%A0%90