[Typescript / TS] Recoil을 사용한 state 관리

Recoil은 state를 관리할 수 있는 리액트의 라이브러리이다.

 

다크모드나 로그인 여부같은 데이터는 어플 전체에서 공유되어야 하는 global state다.

Recoil을 사용하지 않고 이 state에 접근하려면 상위 컴포넌트에서 하위 컴포넌트로 props로 state를 보내줘야 한다.

만약 가장 하위 컴포넌트에서 state를 바꿀 일이 생기면 불필요하게 모든 컴포넌트를 거쳐야 하기 때문에 비효율적이다.

Recoil을 사용하게 되면 state를 객체화시켜 atom함수에 담아 어떤 컴포넌트에서나 바로 state를 읽고 쓰게 할 수 있다.

 

Recoil 초기 설정

1. Recoil을 설치한다.

npm i recoil

 2. index를 RecoilRoot로 감싼다.

ReactDOM.render(
  <div>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </div>,
  document.getElementById("root") as HTMLElement
);

3. atom.ts 파일을 만들어 Atom을 생성한다.

import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark",
  default: false,
});

 

Atom값 가져오기 : useRecoilValue()

atom을 사용하고 싶은 컴포넌트에 useRecoilValue()으로 연결하여 값을 받는다.

useRecoilValue()는 atom의 value를 감지

import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./atoms";

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    ...
  );
}

 

Atom 값 수정하기 : useSetRecoilState()

atom 값을 수정하고 싶다면 useSetRecoilState()로 만든 modifier 함수를 사용한다.

이 함수는 인자로 atom의 값을 변경하는 함수를 받는다.

useState의 setState함수라고 생각하면 된다.

function Coins() {
  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setDarkAtom((prev) => !prev);

  return ( ... );
}