recoil 이용하기

📌시작하며

Flux 패턴을 사용하는 React는 전체적으로 상태를 공유하기 위해서 전역 상태 관리 라이브러리(혹은 그것을 도와주는 무언가…)를 사용해야 한다. 이를 위해 처음 React 프로젝트에서는 Redux를 사용했고, 그 다음 프로젝트는 비교적 간단한 상태 관리가 필요해 Context API를 사용했다.

사실 Context API를 사용한 프로젝트도 초반엔 Redux를 사용할까? 싶다가도 아무래도 Redux보단 Context API가 작성하는 방법도 쉽고, 간단하다보니 Context API를 사용했었다.

서론이 길었다. 어쨌든 Redux가 React와 함께 상태관리를 위해 자주 사용되는 것은 맞지만, 아무래도 학습곡선이 가파르고, 작성해야 할 것도 많다 보니 새로운 상태관리 라이브러리를 찾게 되었고, 그렇게 Recoil을 만나게 되었다.

✅Recoil

리코일 탄생과 관련하여, 공식문서의 설명을 읽어보자. (의역 있음!)

(상태 관리 기능을 사용할 때) 호환성과 단순성을 위해 외부 전역 상태보다는 React의 내장된 상태 관리 기능을 사용하는 것이 가장 좋지만 React에는 몇 가지 한계가 있습니다.

• 컴포넌트 상태는 공통 조상으로 올려 준 다음, 공유할 수 있지만, 여기에는 그 상태를 다시 렌더링해야 하는 큰 트리를 포함할 수 있습니다.

• 컨텍스트는 무한한 값의 집합이 아니라, 오직 단일 값만을 저장할 수 있습니다.
• 이 두 가지 문제점은, 상태가 존재해야 하는 트리의 맨 윗 부분(상태가 있어야 하는 곳)을 코드로 분할하기 어렵게 만들고, 트리의 말단(상태가 사용되는 곳)을 코드로 분할하기 어렵게 만듭니다.

(따라서) 우리는, API 및 의미와 동작을 가능한 한 React 스럽게 유지하면서 이를 개선하고자 합니다.

즉 쉽게 말해, react 내부의 Conexxt api의 단점을 개선하고, ‘react’스럽게 전역적으로 상태관리를 할 수 있도록 도와주는 라이브러리라는 것!😎

✅기본 개념

Recoil은 atoms(공유 상태)에서 selectors(순수 함수)를 통해 흐르는 데이터 흐름 그래프를 생성할 수 있게 해주며, 이를 React 컴포넌트로 내려보낸다. atoms는 컴포넌트가 구독할 수 있는 상태의 단위이며, selectors는 이 상태를 동기적 또는 비동기적으로 변환한다.

그럼 예제를 보면서 좀더 이해해보자!

✅설치

설치해주고, 최상위 요소에 RecoilRoot를 감싸주자.

yarn add recoil

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

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

➡️eslint 설정

프로젝트에서 eslint-plugin-react-hook을 사용하는 경우엔 다음과 같이 구성할 수 있다.

additionalHooks 목록에 ‘useRecoilCallback’을 추가하는 것이 좋은데, useRecoilCallback()에 전달된 종속성이 잘못 지정되면, ESLint가 경고해주면서, 수정사항을 제안하기 때문이다. (additionalHooks의 형식은 정규식 문자열이다.)

// modified .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn", {
        "additionalHooks": "(useRecoilCallback|useRecoilTransaction_UNSTABLE)"
      }
    ]
  }
}

✅atom

➡️atom 선언하기

atom은 상태의 단위다. 업데이트 와 구독이 가능하므로 atom이 업데이트되면 구독된 각 컴포넌트가 새 값으로 다시 렌더링된다!

먼저 atom에는 key와 default 값이 존재한다. 먼저 key는 고유한 속성으로, 디버깅, 지속성, 그리고 모든 원자의 맵을 볼 수 있는 일부 고급 API에 사용된다.

default는 React 컴포넌트의 state와 비슷한 기본값이라고 생각하면 된다.

const fontSizeState = atom({
  key: "fontSizeState",
  default: 14,
})

➡️useRecoilState()

컴포넌트에서 위에서 설정한 atom을 읽거나 사용하기 위해서 useRecoilState라는 훅을 사용한다. React의 useState와 비슷해서 이해하기 쉽다!

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState) 👈
  return (
    <button
      onClick={() => setFontSize((size) => size + 1)}
      style=
    >
      Click to Enlarge
    </button>
  )
}

처음 recoil을 사용해보면서, 특정 컴포넌트에서 setFontSize를 바로 사용해서 상태를 업데이트 해도 다른 컴포넌트의 동일한 atom값도 변할까?란 물음이 생겼다.

(Redux에서는 따로 액션을 정의하고, 액션을 디스패치 하고 업데이트 하기 때문에…)

결론부터 말하자면 가능하다! 너무 간편해서 당황했지만, 정말 Recoil은 이렇게 상태를 업데이트 할 수 있다. 설명 그대로 ‘react’스럽게 말이다!

✅Selectors

selector은 atom이나 다른 selector은 입력으로 받는 순수 함수로, 상위 atom이나 selector가 업데이트되면 selector함수는 다시 평가된다. 컴포넌트는 atom과 마찬가지로 selector를 구독할 수 있으며, selector은 변경될 때마다 다시 렌더링된다.

selector은 상태를 기반으로 한 파생 데이터를 계산하는 데 사용된다. 이를 통해 atom엔 최소한의 상태만 저장되고, 나머지는 그 최소한의 상태를 기반으로 효율적으로 계산된다.

selector은 get과 사용된다. get 속성은 계산 될 함수를 뜻한다! 이 함수는 전달된 get 인수를 사용해 atom 및 다른 selector의 값에 액세스할 수 있다. 다른 atom이나 selector에 접근해, 해당 atom이나 selector가 업데이트되면 이 함수를 다시 계산하기 위한 종속성 관계가 생성된다.

const fontSizeLabelState = selector({
  key: "fontSizeLabelState",
  get: ({ get }) => {
    const fontSize = get(fontSizeState)
    const unit = "px"

    return `${fontSize}${unit}`
  },
})

이 예제에서는 fontSizeState의 atom값을 받아와 fontSize 변수에 저장하고, 14px 과 같이 px값을 나타내는 특정 값을 만들어 return 하고 있다.

➡️사용예제

사실 selector 자체는 공식문서만 읽고 완전히 이해를 못했는데, 사용해보면서 감을 잡았다.

현재 진행중인 프로젝트는 다국어 모드를 지원하려고 하고, Header에서 atom 상태(ko or jp 언어)를 교체할 수 있다. 그 부분이 하단의 language 부분이다!

이때 선택된 language에 따라 언어데이터가 들어있는 json 파일을 사용해야 하는데, 이때 selector를 사용해 구현했다.

"use client"
import { atom, selector } from "recoil"
import ko from "@/language/ko.json"
import jp from "@/language/jp.json"

export const language = atom<string>({
  key: "nowLanguage",
  default: "ko",
})

export const languageMode = selector({
  key: "languageDataSelector",
  get: ({ get }) => {
    const nowLanguageMode = get(language)
    return nowLanguageMode === "ko" ? ko : jp //언어 json 데이터 선택
  },
})

📩마무리

이렇게 간단하게 recoil에 대해 알아봤다! 확실히 redux보다 편하고 ‘react’스럽다는게 어떤 의미인지 와닿는 것 같다.

참고로 recoil 공식문서는 한국어를 지원한다! 영어, 프랑스어, 한국어, 중국어 순으로 선택이 가능한데, 한국어 개발자 분들이 기여하신 부분일까? (만약 그렇다면 정말 감사하다)🥺

나도 이런 기여를 해보고 싶다는 생각이 든다.😎

🗂️참고 사이트

• https://recoiljs.org/docs/introduction/installation