Recoil

사이트의 dark mode, light mode를 만들기 위해 Recoil에 대해서 배웠다.

Recoil은 props를 여러 컴포넌트에 단계별로 전달할 필요없이 하나의 Recoil을 컴포넌트에서 가져다가 쓸 수 있다.

기존에는 부모 -> 자식 경로로 props를 전달해 state를 변경했었는데
Recoil은 atom이라는 하나의 store를 가지고 모든 component에서 사용이 가능하다.

기존에 많이 사용되는 Redux와 유사하지만 React에 최적화 되어있지 않고 더 복잡하기 때문에 불편함이 많다.

Recoil은 위 그림과 같이 Atom들로 여러 컴포넌트 관리가 가능하다.

atoms.ts

import { atom } from "recoil";

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

App.tsx

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen={true} />
      </ThemeProvider>
    </>
  );
}

useRecoilValue를 통해 isDarkAtom의 value를 가져온다. 이것은 read-only이라 값을 set할 순 없다.

Coins.tsx

function Coins() {
  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setDarkAtom((prev) => !prev);
  return( 
  	<button onClick={toggleDarkAtom}>Toggle Mode</button>
  );
  }

useSetRecoilState를 이용해 state값을 바꿔준다. 이것은 Recat의 setState와 유사하다.

만약 값을 가져오는 'useRecoilValue'와 state를 변경해주는 'useSetRecoilState' 를 동시에 하고 싶다면
useRecoilState 를 사용하면 된다.

Coins.tsx

function Coins() {
  const [isDark, setIsDark] = useRecoilState(isDarkAtom)
  const toggleDarkAtom = () => setIsDark((prev) => !prev);
  return( 
  	<button onClick={toggleDarkAtom}>Toggle Mode</button>
  );
  }