[TIL] Recoil 시작하기

Recoil이란?

Recoil은 React를 위한 상태 관리 라이브러리이다.

 

설치하기

Recoil 패키지는 npm에 존재한다.

npm install recoil

 

RecoilRoot

recoil을 사용하는 컴포넌트는 부모 트리에 RecoilRoot가 필요하다. 보통은 루트 컴포넌트에 RecoilRoot를 넣는다.

import React from 'react
import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil'
function App() {
  return (
      <RecoilRoot>
        <CharacterCounter />
    </RecoilRoot>
  )
}

 

Atom

Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 re-rendering된다.

const textState = atom({
  key: 'textState',    // unique id
  default: '',    // default 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} onChnage={onChange} />
        <br />
        Echo: {text}
    </div>
    );
}

 

Selector

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

const charCountState = selector({
  key: 'charCountState',    // unique ID
  get: ({get}) => {
    const text = get(textState)
    return text.length
  }
})

이를 useRecoilValue() hook을 사용해서 charCountState 값을 읽을 수 있다.

function CharacterCount() {
  const count = useRecoilValue(charCountState)
  return <>Charcter Count: {count}</>
}

 

참고자료

• https://recoiljs.org/ko/docs/introduction/getting-started/