[REACT] Recoil

💡 Recoil이란 ??

Recoil는 Facebook에서 만든 React를 위한 상태 관리 라이브러리다.
따라서 Recoil를 사용하기 위해서는 React가 설치되어 있어야 한다.
설치 방법으로는 Create React App가 있다.

npx create-react-app my-app

npm install recoil

✏️ RecoilRoot

import React from 'react';
import ReactDOM from 'react-dom/client';
import CharacterCounter from './CharacterCounter';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RecoilRoot>
    <CharacterCounter />
  </RecoilRoot>
);
// RecoilRoot로 감싸주자!!

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

⭐️ Atom

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

const textState = atom({
  key: 'textState', // unique ID (고유 아이디)
  default: '', // default value (우리가 사용할 value)
});

atom을 사용하기 위해서는!

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

function TextInput() {
  const [text, setText] = useRecoilState(textState);
	//useRecoilState(textState) = useState('')
    // textState의 default value가 ''기 때문.
  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를 쉽게 이해하지 못했다. 많은 고민 끝에 정리된 결과로는

💡 기존 atom으로 만든 state를 변형해서 사용할 때 (selector로 값은 변형해서 사용해도 원본 값은 변하지 않음.)

useRecoilValue

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

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

useRecoilValue는 atom으로 만든 state를 state에 담아 사용하지 않고 value값만 받아 쓸 수 있다.

redux 다음으로 배운 상태 관리 라이브러리로 redux를 베이스로 나오다보니 훨씬 가볍고 편리하게 사용할 수 있다 생각이 된다. 이번 기업협업을 하게된 곳에서는 recoil을 사용하기에 하루 빨리 익숙해져야 할 필요가 있다고 생각한다.