Recoil

Concurrent Renderer를 공식 지원하는 리액트 상태 관리 라이브러리

다른 상태 관리 도구와 다른 점

이전 프로젝트에서는 별도의 라이브러리를 사용하지않고 react에서 제공하는 useState를 사용했다. useState는 상태가 변경될 때마다 re-rendering하기 때문에 불필요한 렌더링이 발생할 수 있으므로 많은 양의 데이터를 데이터를 처리하기에 적합하지 않다. 이외에도 Redux, Mobx 등이 있지만 각각의 단점이 존재한다. 이와 비교하여 recoil은 상태구조를 가지고 있지 않으며 사용법이 비교적 쉽다는 점이 장점이다.

Atom

Recoil에서 상태를 정의하고 저장하기 위한 기본적인 단위. 일반적으로 사용자 정보, 애플리케이션의 UI 상태, 데이터 로딩 상태 등과 같은 전역적인 데이터를 관리하기 위해 사용된다.

import { atom } from 'recoil';

export const nameState = atom({
key: 'nameState',
default: 'John Doe',
});

atom을 사용하여 이름 상태를 정의 예시

Selector

selector는 atom과 달리 파생된 값을 계산하고 반환하는 데 사용된다. 다른 상태(다른 atom 또는 selector)에 의존하여 파생된 값을 계산하고 이 값을 읽으며. 이를 통해 계산된 데이터를 추출하고 필요한 변환을 수행한다.

import { selector } from 'recoil';
import { nameState } from './atoms';

export const upperCaseNameState = selector({
  key: 'upperCaseNameState',
  get: ({ get }) => {
    const name = get(nameState);
    return name.toUpperCase();
  },
});

Selector를 사용하여 이름을 대문자로 변환하는 함수 예시

사용법

npm install recoil

or

yarn add recoil

recoil 설치

const { RecoilRoot } = require('recoil');

function App(props) {
    const { Component, pageProps } = props;
  
    return (
        React.createElement(RecoilRoot, null,
          React.createElement(Component, pageProps)
        )
    );
}

module.exports = App;

Recoil을 사용하는 컴포넌트는 부모 트리 어딘가에 RecoilRoot가 필요하다. 루트 컴포넌트가 가장 적합하다. 이후 앞서 설명한 Atom과 Selector 등을 활용하여 Recoil을 사용한다.




프로젝트에서 사용해보고 난 뒤에 느낀 장점과 단점 등을 정리해봐야겠다.