Recoil 시작하기

Recoil 공식 문서 중 Getting Started를 번역한 포스트입니다.

React 애플리케이션 생성하기

Recoil는 React를 위한 상태 관리 라이브러리다.
따라서 Recoil를 사용하기 위해서는 React가 설치되어 있어야 한다.
React 애플리케이션을 시작하는 가장 쉽고 추천하는 방법은 Create React App을 사용하는 것이다.

npx create-react-app my-app

npx는 npm 5.2+ 이상에서 함께 제공되는 패키지 실행 도구다.
오래된 버전의 npm은 이 설명를 보면된다.

Create React App을 설치하는 더 많은 방법은 공식 문서를 보면된다.

설치

Recoil 패키지는 npm에 존재한다.
안정한 최신 버전을 설치하기 위해서는 아래의 명령어를 실행하면 된다.

npm install recoil

또는 yarn을 사용한다면 이 명령어를 사용하면 된다.

yarn add recoil

RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다.
루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.

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

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

우리는 다음 부분에서 CharacterCounter 컴포넌트를 구현할 것이다.

Atom

Atom은 상태(state)의 일부를 나타낸다.
Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다.
그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 렌더링 되는 결과가 발생할 것이다.

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
})

컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 아래와 같이 사용하면 된다.

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  )
}

function TextInput() {
  const [text, setText] = useRecoilState(textState)

  const onChange = event => {
    setText(event.target.value)
  }

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  )
}

Selector

Selector는 파생된 상태(derived state)의 일부를 나타냅니다. 파생된 상태는 상태의 변화다.
파생된 상태를 순수 함수에 전달된 상태를 어떤 방법으로든 수정된 결과물로 생각할 수 있다.

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

    return text.length
  },
})

우리는 useRecoilValue() 훅을 사용해서 charCountState 값을 읽을 수 있다.

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

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

Demo

아래는 완성된 결과물이다.

input에 값을 적고 그 값의 길이를 확인하는 짧은 예제를 살펴보았다.
개인적으로 redux나 contextAPI를 사용했던 것 보다 쉽게 쓸 수 있을 것 같다.
useRecoilState, useRecoilValue가 useState나 useMemo같은 Hook과 비슷한 것 같다.
어렵지 않게 Hook을 이용해 전역적으로 상태 관리를 하게 도와주는 좋은 패키지인 것 같다.
실제 작성한 코드는 여기에서도 확인할 수 있다.