[React] Recoil 사용 해보기

Recoil을 사용하면 state를 다른 컴포넌트에 prop을 통해 계속 내려줄 필요 없이,

atom을 사용해서 여러 컴포넌트에서 쉽게 접근할 수 있다!

 

사용하기 위해선 설치를 먼저 해주어야 한다.

npm i recoil

 

그리고 atoms.ts 파일을 하나 만들어 준 뒤 내부에 아래와 같이 작성했다.

import { atom } from "recoil"; //import recoil

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

 

그리고 index.tsx에서 App 컴포넌트를 감싸준다.

import { RecoilRoot } from "recoil"; //import RecoilRoot

root.render(
  <React.StrictMode>
    <RecoilRoot> //recoil
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </React.StrictMode>
);

 

다음으로 사용하고자 하는 컴포넌트에는 아래와 같이 작성한다.

function App() {
  const isDark = useRecoilValue(isDarkAtom); //atoms.ts의 isDarkAtom에 연결
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightThemes}> //atom false=darkTheme, true=lightTheme
        <GlobalStyle />
        <Router />
      </ThemeProvider>
    </>
  );
}

 

또한 토글처럼 값을 계속 변경할 필요가 있을 수도 있는데, 그럴 땐 useSetRecoilState를 사용한다.

  const setDarkAtom = useSetRecoilState(isDarkAtom); //isDarkAtom setState
  const toggleDarkAtom = () => setDarkAtom((prev) => !prev); //prev 토글 구현
  
  /* <button onClick={toggleDarkAtom}>Toggle Mode</button> */