[React] Recoil을 사용해서 상태 관리하기

React로 구현한 개인 프로젝트에서 상태 관리 라이브러리를 뭘쓸까 고민하다가 Recoil을 사용하기로 했당

일단 사용법이 간단해서 넘모 좋았다... 직관적인게 제일 좋아!!!

생각보다 한글로 정리된 글은 없어서, 아래의 recoil 공식 docs를 내가 이해한대로 정리해봤다 😀

 

recoiljs.org/docs/introduction/getting-started
 

Getting Started | Recoil

 

1. Recoil, 왜 생겼나요 

호환성과 명료성을 위해서는 React의 built-in 상태관리기능을 사용하는 것이 좋겠지만은,,

다들 알다시피😭 React의 state에는 아래와같은 한계가 있음

부모 컴포넌트로 부터 내려주는 방식으로만 state 공유가 가능하며, 컴포넌트 tree가 깊어지면 re-render되어야 하는 범위가 커짐 
또, 컴포넌트 tree의 상단(state를 들고 있는 곳)과 하단(state를 참조하는 곳)의 코드를 분리하는 것도 어려움

 

recoil은 이러한 react의 한계를 해결하면서도, 번잡한 bolierplate code없이 문법과 동작을 최~대한 react스럽게 하는 상태관리 라이브러리임 (먼가,, 타 라이브러리 저격같은건 저만 그런게 아니겠죠? ㅎㅎ)

 

2. core concepts

redux에 action/state/index가 있었다면, recoil에는 atom과 Selector라는 개념이 있음

Atom : 컴포넌트들이 구독* 할 수 있는 state의 최소 단위
           *구독이란, Atom이 update되면 해당 atom을 구독하고 있는 컴포넌트들이 re-render된다는 의미를 가짐
Selector : Atom으로 선언된 state 또는 다른 Selector를 input으로 받아 목적에 따라 계산된 값을 return하는 순수함수

코드로 보면 이해가 빨리됨 ㅎㅎㅎ 

//atom
const buttonClickCountState = atom({
  key: 'buttonClickCountState',
  default: 0,
});
//selector
const buttonLabelState = selector({
  key: 'buttonLabelState',
  get: ({get}) => {
    const count = get(buttonClickCountState);
    return `${buttonClickCount}번 클릭함`;
  },
});
//component
function button() {
  const [buttonClickCount, setButtonClickCount] = useRecoilState(buttonClickCountState);
  const buttonLabel = useRecoilValue(buttonLabelState);
  return (
    <button onClick={() => setButtonClickCount((count) => count + 1)}>
      {buttonLabel}
    </button>
  );
}

 

자세히 보면 Atom이 쓰고/읽기가 모두 가능한 반면, selector는 읽기만 가능한 구조로 되어있는걸 볼 수 있는데

이는 '최소한'의 state만 atom으로 정의하고, atom에서 파생 가능한 데이터는 Selector로 관리함으로서 state가 불필요하게 장황하게 관리되는 것을 방지하기 위함임