Recoil을 이용해서 쉽게 상태관리를 해보자

블로그로 정리하면서 공부

Recoil 이란?

 

리코일은 2020년 Facebook에서 발표한 상태관리 라이브러리다.

React만으로는 복잡한 상태관리가 어렵기 때문에 별도의 라이브러리를 사용

ex) Redux, Recoil, Zustand, Mobx ...등

Recoil과 다른 상태관리 방법 비교

 

1. React useState

부모 컴포넌트에서 prop drilling > 불편

공통 prop가 변경될 때마다 계속 re-rendering이 일어남

 

2. React useContext

상태 마다 Context Provider를 선언해야함

상태 변경될때마다 캐싱 없이 매번 re-rendering이 일어남

 

3.Redux

전역상태를 수정하기 위해 반드시 액션을 선언해서 수행해야해 데이터의 흐름 예측이 쉬움

좋은 개발자 도구가 있어서 문제 발생시 바로 확인가능

Redux Toolkit을 사용하면 불변성을 지켜줌

초기 구축, 유지보수에 코드 작성 많음..

복잡함..

 

4. Recoil

코드 작성이 간단하 안정적

설치

npm install recoil

 

ESLint 설정

useRecoilCallback을 additionalHook목록에 추가

// 수정된 .eslint 설정
{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useRecoilCallback"
      }
    ]
  }
}

 

 

주요개념

 

리코일을 사용하면 atoms(공유 상태)에서 selectors(순수 함수)를 거처 react컴포넌트로 내려가는 data-flow graph를 만들수있다.

RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다.
루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

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

Atoms

Atoms는 상태의 단위, 업데이트와 구독이 가능하다

atom이 업데이트되면 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.

Atoms는 React 로컬 컴포넌트의 상태 대신 사용.

여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.

Atoms는 atom함수를 사용해서 생성.

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

고유한키 값과 기본 값을 가진다.

컴포넌트에서 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용한다. useState와 비슷하지만 컴포넌트간에 상태를 공유할 수 있다.

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selectors

Selectors는 atms나 다른 selectors를 입력으로 받는 순수 함수다.

상위의 atoms 또는 selectors를 atmos처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 re-rendering된다.

Selectors는 상태를 기반으로 하는 파생데이터를 계산하는 데 사용한다.

최소한의 상태집합만 atoms에 저장하고 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 계산함으로 쓸모 없는 상태의 보존을 막는다.

컴포넌트의 관점에서 보면 Selectors와 Atoms는 동일한 인터페이스를 가지므로 서로 대체할 수 있다.

Selectors는 selector함수를 사용해 정의한다.

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

 

get인자를 통해 atmos와 다른selectors에 접근할 수있다.

접근하면 자동으로 종속관계 생성 -> 업데이트되면 이 함수도 다시 실행

Selectors는 useRecoilVaule()를 사용해 읽을 수 있다.

하나의 atom 이나 selector를 인자로 받아 값을 반환한다.

 

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

오늘은 여기까지

 

참고사이트

https://recoiljs.org/ko/docs

동기 | Recoil

https://techblog.yogiyo.co.kr/recoil%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%86%90%EC%89%AC%EC%9A%B4-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-b70b32650582

Recoil을 이용한 손쉬운 상태관리