Recoil

Recoil 이란?

Recoil : 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리 이다. Redux 와 다르게 전역상태의 설정/정의가 매우 쉬우며, Recoil이 지원하는 Hooks로 이를 get/set 하기 때문에 React 문법과 매우 유사하다.

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

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

Recoil의 설치는 패키지 매니저를 이용해 쉽게 설치할 수 있다.

yarn add recoil

Recoil 시작하기

Recoil 을 프로젝트에 적용하는 법은 다음과 같다. 최상단의 <App /> 컴포넌트를 RecoilRoot 로 감싸주기만 하면 된다 !

// App.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

Atoms

Atoms : Recoil 상태의 단위를 의미한다. 컴포넌트간에 이 상태는 공유되며, 구독 및 업데이트가 가능하다.

특히, atom의 상태가 업데이트되면, 이를 구독하던 컴포넌트들이 모두 리렌더링된다.

Atoms를 설정할 땐, Recoil 의 atom() 메소드를 통해 변수에 할당해주면된다. 이 때, key, default 2개의 프로퍼티를 필수로 설정해야한다.

• key : 고유한 key값 (보통 해당 atom을 생성하는 변수 명으로 지정)
• default : atom의 initial state를 의미

// /recoil/index.js
import { atom } from "recoil";

// nameState라는 atom 생성
export const nameState = atom({
  key: "name",
  default: ""
})

Selectors

Selectors : atom 혹은 다른 Selector 상태를 입력받아 동적인 데이터를 반환하는 순수함수(Pure Function)이다.

상태값에서 비롯된 파생된 데이터를 만들 때 사용되며, atom처럼 컴포넌트가 이를 구독할 수 있다.

Selector 를 설정할 땐, Recoil 의 selector() 메소드를 통해 등록하면 된다. 이 때, key, get 두개의 프로퍼티를 설정해야한다.

• key : 고유한 key값
• get : Selector의 순수함수. 사용할 값을 반환하며, 매개변수인 콜백 객체 내 get() 메소드로 다른 atom 혹은 selector를 참조한다.
• set : 쓰기 가능한 모드. 콜백객체, 새로운 값 2가지를 각각 매개변수로 받으며, 다른 atom들을 새로운 값으로 세팅할 수 있다.

import { selector } from "recoil";

// 위에 설정한 atom을 참조 -> 새로운 값을 만들어냄.
export const nameListSelector = selector({
  key: "nameList",
  get: ({ get }) => {
    const name = get(nameState);

    return !name ? [] : [name];
  },
  // nameState 변경
  set: ({ set }, newValue) => {
    set(nameState, newValue);
  },
})

Recoil 사용하기

Recoil 의 전역상태 (Atom, Selector)를 get/set 하기 위해 Recoil 에서 제공하는 Hooks들을 사용한다.

• useRecoilState() : useState()와 유사하다. [state, setState] 튜플에 할당.

import { useRecoilState } from "recoil";
import { nameState } from "./recoil";

const [name, setName] = useRecoilState(nameState); 

• useRecoilValue() : 전역상태의 state의 상태값만을 참조하기 위해 사용
• useSetRecoilState() : 전역상태의 setter 함수만을 활용하기 위해 사용

import { useRecoilValue, useSetRecoilState } from "recoil";
import { nameState } from "./recoil";

const name = useRecoilValue(nameState);
const setName = useSetRecoilState(nameState);

• useResetRecoilState() : 전역상태를 default 값으로 reset하기 위해 사용

import { useResetRecoilState } from "recoil";
import { nameState } from "./recoil";

const resetName = useResetRecoilState(nameState);

// 초기화
resetName();

여기까지 기본적인 Recoil 의 사용법에 대해 적어보았다.

이외에도 Recoil 의 Selector 와Suspense 를 이용한 비동기 처리도 있으나, 현재 진행하고 있는 프로젝트에선 react-query 와Recoil 을 사용하여 서버, 클라이언트 상태를 관리하고있어 추후에 다뤄볼려고한다.