[Recoil] #1 Recoil?

리액트를 시작하게 되면서 무슨 상태관리 툴을 사용할지 고민했고

redux가 아닌 새로운 상태관리 툴을 사용해보고자 recoil을 써보기로 결정했다

recoil의 특징과 사용 방법에 대해 정리해본다

 

Recoil

Recoil은 페이스북이 2020년 5월 소개한 리액트 전용 상태관리 라이브러리이다.

store, action, reducer 등을 신경 쓸 필요 없이초기 세팅이 간단하며, 단순한 사용법을 가지고 있다. 또한 리액트를 위해 만들어진 상태관리 라이브러리이기에 리액트처럼 동작하며 리액트를 사용했던 사람이라면 쉽게 접근 가능하다.

 

공식문서에 따르면 다음과 같은 장점이 있다고 한다

https://recoiljs.org/ko/

Recoil

 

---

이제 recoil을 사용하는 방법에 대해 알아보자

 

npm 또는 yarn으로 패키지를 설치한다.

// npm
npm install recoil
// yarn
yarn add recoil

RecoilRoot

컴포넌트에서 recoil 상태를 사용하기 위해선 부모 트리 어딘가에 RecoilRoot가 필요하다.

보통 전역적으로 사용하기 때문에 루트 컴포넌트에 넣어준다.

// App.js
import React from 'react';
import { RecoilRoot } from 'recoil';

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

Atom

atom은 상태의 단위이며, 업데이트와 참조가 가능하다.

atom의 값을 읽는 컴포넌트들은 암묵적으로 atop을 구독하며, atom이 업데이트되면 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링 된다.

const textState = atom({
  key: 'textState', // unique ID (다른 atom/selectors와 구별 위함)
  default: '', // default value (= initial value)
});

key는 atom을 식별하기 위한 고유한 문자열이다. 프로젝트 전체에서 다른 atom, selector에 대해 고유해야 한다.

default는 해당 atom의 초기값이다.

 

Selector

공식 문서에 따르면 Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.

순수 함수란, 함수에 동일한 인자가 주어졌을 때 항상 동일한 값을 리턴하는 함수이다.

 

즉 selector를 사용하면 어떤 상태를 가져다가 다른 상태를 만들 수 있다. 하나의 atom을 다르게 변형해 사용할 수 있는 것이다. 

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

    return text.length;
  },
});

get에서는 파생된 상태를 반환한다.

get(textState)처럼 textState를 get 하고 있으면 textState가 바뀔 때마다 새로운 값을 리턴해준다

selector하나에 get함수를 이용하여 여러 가지 atom상태값들을 전달받을 수 있다. 그중 하나라도 변하게 되면 리렌더링 된다.

위 코드에서는 atom의 textState를 가공해 length를 반환한다.

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

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

useRecoilValue를 사용해서 charCountState 값을 읽을 수 있다.

 

atom에서는 안되는 비동기처리를 selector에서는 사용할 수 있다.

즉, 데이터의 비동기 처리가 별도의 라이브러리 없이 Recoil 내부에서 Selector를 이용해 가능하다.

const mySelector = selector({
  key: 'MySelector',
  get: async ({get}) => {
    return await myAsyncSelector(get(tempState));
  },
});

 

selector에 대해서는 이후 문서에서 다시 한번 다루자

 

---

recoil을 사용하기 위한 시작과 기본 개념을 알아보았다.

다음 문서에서 atom을 사용하기 위한 hook에 대해 알아보자