React | Recoil

🔥 Intro

Recoil은 React를 위한 상태관리 라이브러리이다. 웹에 전역적으로 필요한 상태 관리를 쉽게 도와준다.

🔥 Install

npm install recoil

🔥 RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot가 필요하다.
<Root />를 <RecoilRoot>로 감싸준다.

// index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "react-query";
import { RouterProvider } from "react-router-dom";
import router from "./Router";
import Root from "./Root";
import { HelmetProvider } from "react-helmet-async";
import { RecoilRoot } from "recoil";

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <HelmetProvider>
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <RouterProvider router={router} />
          <Root />
        </QueryClientProvider>
      </RecoilRoot>
    </HelmetProvider>
  </React.StrictMode>
);

🔥 Atom

Atom은 상태의 일부를 나타낸다. 컴포넌트 어디에서도 접근할 수 있다. atom에 변화가 있으면 atom 값을 읽는 모든 컴포넌트들은 재 랜더링 된다.

✨ atom 정의

전역적으로 사용할 atom을 정의한다. atom()을 사용하여key와 default 값을 정의한다.

// atoms.ts

import { atom } from "recoil";

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

✨ useRecoilState()

atom 값에 접근하기 위해서는 useRecoilState()를 사용한다.

const [isDark, setIsDark] = useRecoilState(isDarkAtom);

아래에서는 useRecoilValue(), useSetRecoilState()을 사용하여 isDark, setIsDark 중 하나의 값만 가져왔다.
isDark 값과 <ThemeProvider>를 사용해 dark mode, light mode를 구현할 수 있다.

// Root.tsx

import { Outlet } from "react-router-dom";
import { ThemeProvider } from "styled-components";
import { ReactQueryDevtools } from "react-query/devtools";
import { darkTheme, lightTheme } from "./theme";
import { GlobalStyle } from "./screens/css/global";
import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./atoms";

function Root() {
  const isDark = useRecoilValue(isDarkAtom);

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <GlobalStyle />
      <Outlet context />
      <ReactQueryDevtools />
    </ThemeProvider>
  );
}

export default Root;

// components/Header.tsx

export default function Header({ children }: { children: ReactNode }) {
  const setIsDark = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setIsDark((cur) => !cur);

  return (
    <Cotainer>
      <Home>
        <Link to="/">
          <FontAwesomeIcon icon={faHouse} />
        </Link>
      </Home>
      {children}
      <button onClick={toggleDarkAtom}>light/dark</button>
    </Cotainer>
  );
}