Recoil - Recoil 알아보기

등장 배경

• 호환성 및 단순함을 이유로 외부 글로벌 상태 관리 라이브러리 보다는 React 자체에 내장된 상태 관리 기능을 사용하는것이 좋음
• Context는 단일 값만 저장할수 있고, 여러값들의 집합을 담을수 없다는 한계가 있음.
• API와 의미 및 동작을 최대한 React답게 유지하기 위해

설치 및 사용

npm install recoil 혹은 yarn add recoil

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

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

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

기본 개념

Atom

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

// Atom 작성 예시
const textState = atom({
  key:'textState',
  default:'',
});

// 컴포넌트에서 Atom 읽고 쓰기. 여기선 useRecoilState 사용
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)의 일부를 나타낸다.
• 파생된 상태는 상태의 변화다.
• 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수함수에 전달된 상태의 결과물로 생각할 수 있다.

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

    return text.length;
  },
});

위의 코드는 get 프로퍼티를 이용해 atom의 textState 을 가공하여 text의 길이를 반환한다.

// 컴포넌트에서의 selector 사용 예시
function CharacterCount() {
  const count = useRecoilValue(charCountState);

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

references : https://recoiljs.org/docs/guides/