[Recoil] 사용법

리코일 이란?

React에서 사용하는 Recoil은 상태 관리 라이브러리로, Facebook에서 개발한 오픈 소스 라이브러리이다. Redux나 Context API와 같은 다른 상태 관리 도구와 비교될 수 있지만, Recoil은 특히 복잡한 상태 관리 및 컴포넌트 간의 데이터 공유를 보다 간편하게 만드는 데 중점을 둔다. Redux는 훨씬 오래되었지만 보일러플레이트 코드가 많은 단점이 있다(그럼에도 가장 많이 쓰임). contextAPI는 react 내장 api이지만 비동기 처리가 비교적 어렵고, 렌더링 최적화를 별도로 해주어야 하기 때문에 규모가 커질수록 외부 라이브러리를 사용한다.

Redux는 React처럼 페이스북팀에서 만들었기 때문에 신뢰성과 높은 호환성을 기대할 수 있다. 코드량이 적어도 높은 확장성을 갖고 있다.

 

특징

 

작고 React스럽다

Recoil은 Redux에 비해 작성해야 하는 코드의 양도 적고 useState의 사용법과 비슷해서 거부감이 적다

 

Atoms

Recoil에서 Atoms는 상태의 기본 단위이다. Atoms는 독립적이며, 다른 컴포넌트에서 이를 구독하고 업데이트할 수 있다. 유튜브 채널을 구독하면 채널에 올라온 영상 알림이 오듯이, 구독한 Atoms가 변화하면 변경된 값을 전달 받는다

 

DevTools 통합

Recoil은 개발자 도구를 통해 현재 애플리케이션의 상태를 쉽게 모니터링하고 디버깅할 수 있도록 도구를 제공한다

 

 

국내의 채용 사이트에서 Redux다음으로 Recoil을 많이 본 것 같다. Recoil은 ES6 사용을 권장하기 때문에 비교적 오래된 프로젝트에는 적합하지 않아서 사용하지 않는 것 같다

 

 

시작하기

1. 설치

// npm 사용
npm install recoil
// yarn 사용
yarn add recoil

 

 

디렉토리 구조의 경우, 가독성만 좋으면 상관이 없고 프로젝트의 규모에 따라 달라질 수 있다. 규모가 작은 실제 나의 첫 배포 프로젝트에서 사용했던 구조를 기반으로 설명을 하겠다.

 

src

ㄴrecoil

       ㄴatoms.js

       ㄴselector.js

 

 

2. RecoilRoot로 감싸기

Recoil State를 사용하기 위해 사용하고자 하는 컴포넌트의 부모를 RecoilRoot로 감싸주어야 한다

App.js 또는 index.js 등 각 프로젝트 상황에 맞게 RecoilRoot를 사용한다.

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

const App = () => {
  return (
    <RecoilRoot>
      <div>
        Hello world
      </div>
    </RecoilRoot>
  );
}

 

3. 독립적인 상태인 atoms를 생성

src>recoil>atoms.js

변수명, key, default 값을 설정한다. 내 프로젝트에는 계정의 상태를 관리하기 위해 accountState로 설정했다.

key: 어플리케이션 전체에서 고유한 값으로 설정

default: 초기값

 

import { atom } from 'recoil'

export const accountState = atom({
  key: 'accountState',
  default: '',
})

 

4. 원하는 컴포넌트에서 사용하기

useState와 기본적인 사용법이 매우 유사하다. useState 대신 useRecoilState를 쓰고 초기 값으로 atoms를 전달 해준다

나의 프로젝트에는 초기화를 위한 useResetRecoilState도 사용해 주었다.

import React, { useEffect, useState } from 'react'
import { accountState } from '../../recoil/atoms'

const Header = () => {
    const [account, setAccount] = useRecoilState(accountState)
    const resetAccount = useResetRecoilState(accountState)
    useEffect(() => {
      if (loggedInAccount !== null) {
        setAccount(loggedInAccount)
      }
    }, [])
    return (
      <div>
        {account}
      </div>
    )
}
export default Header

 

recoil의 주요 hooks

• useRecoilState(): atom을 읽고, 쓰기 위해 사용. 컴포넌트는 atom을 구독함.
• useRecoilValue(): atom을 읽기만 할 때 사용. 컴포넌트는 atom을 구독함.
• useSetRecoilState(): atom을 쓰려고만 할 때 사용.
• useResetRecoilState(): atom을 default 값으로 초기화 할 때 사용.

5. Selector (선택)

Selector는 전역 상태에서 파생된 상태를 반환하는 함수인데 필수가 아닌 필요에 따라 사용하면 된다. 

예를들어 accountState에 따라 로그인 상태의 bool값을 얻고 싶을 때, 다음과 같이 작성이 가능하다

import { selector } from 'recoil'
import { accountState } from './atoms'

export const userLoginState = selector({
  key: 'userLogin',
  get: ({ get }) => {
    const data = get(accountState)
    const result = !(data === '' || data === null)
    return result
  },
})

 

atoms와 마찬가지로 변수, key 값을 설정한다.

get부분을 위와 같이 작성하고 data를 원하는 대로 사용하여 return을 해준다

set함수도 사용할 수 있는데, 두번째 인자에서 값을 받아서 사용하면 된다. (  set: ({ set }, newValue) => {} )

useRecoilValue를 통해 사용한다.

 

 

참고

Recoil: React를 위한 상태 관리 라이브러리