Recoil

Recoil 설치

1. npm 사용자 : 터미널에 npm install recoil 을 입력합니다.
2. yarn 사용자 : 터미널에 yarn add recoil 을 입력합니다.

Recoil 세팅

세팅은 늘 그렇듯 app.tsx 파일에서 하시면 됩니다.

//app.tsx 파일
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
		//RecoilRoot로 모든 컴포넌트를 묶어주세요
     	<Component />
    </RecoilRoot>
  );
}

Recoil 사용

Recoil에서는 Atom으로 state의 일부를 보여줍니다.

그리고 컴포넌트들은 자신이 필요한 Atom을 참조하고 있습니다. 따라서 자신이 참조하고 있는 Atom에 변화가 있으면,해당 atom을 참조하는 모든 컴포넌트에서 리렌더링이 일어납니다.

// Atom**
const textState = atom({
  key: 'textState', // state의 이름
  default: '', //초기값
});

💡 Atom은 꼭 파일로 따로 빼야하나요?

→ 아니요, 필수는 아닙니다.
다만, 파일을 분리하게 되면 반드시 export를 해주셔야 합니다.

위의 아톰을 실제로 사용하기 위해선 useRecoilState를 사용해야 하는데요, 사용법은 useState와 비슷해 친숙해지기까지 오래 걸리지 않으실 것 입니다.

// TextInput 컴포넌트
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>
  );
}

위와 같이 사용하게 되면, textState를 참조하고 있는 모든 컴포넌트에서 재렌더가 일어나게 됩니다.

💡 Recoil은 결국 context-api의 단점을 보완한 상태관리 라이브러리이기때문에 context-api를 기반으로 하고있습니다!

더 자세한 공부를 원하신다면, 여기에서 공부하세요!