recoil

설치

$> npm i recoil
$> yarn add recoil

yarn 링크

https://yarnpkg.com/package/recoil

npm 링크

https://www.npmjs.com/package/recoil

특징

페이스북 (지금은 메타가 되었다) 이 2020년에 발표한 상태관리 라이브러리이다

기존 상태관리의 단점

사용해보기

RecoilRoot 추가

root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

recoil의 훅을 가져다 사용할 모든 컴포넌트의 조상에 RecoilRoot가 반드시 있어야 한다

보통은 최상위 index.tsx (또는 index.jsx) 의 root 컴포넌트에 위처럼 배치하는 편이다

• RecoilRoot 가 여러 개일 경우, 각각이 독립적인 atom 상태값을 갖는다
  • atom이 각 RecoilRoot에 따라 다른 값을 갖고 있게 된다는 뜻이다
  • selector는 공유 가능하고, 캐시도 공유될 수 있다
• RecoilRoot가 중첩되어 있을 경우, override 옵션을 통해 새로운 스코프를 생성할지, 상위 RecoilRoot에게 역할을 넘겨주고 자식 렌더링만을 수행할 지 결정할 수 있다

atom 선언

import { atom } from "recoil";

export const testState = atom({
  key: "testState",
  default: 30,
});