Recoil 시작하기

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

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

Echo:

Character Count: 0