[React.js] Recoil - atom

Recoil

recoil은 리액트를 위한 전역 상태 관리 라이브러리 중 하나이다.

리액트의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다.

즉, 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 형태를 띄게 된다.

따라서 모든 컴포넌트에서 쓰여야 하는 상태가 있다면 이 정보를 계속 계속 하위 컴포넌트로 전달해야하는 불편함이 있다.

이를 해결하기 위해 나온 것이 recoil과 같은 상태 관리 라이브러리이다.

 

recoil을 사용하면 위 그림과 같이 전역으로 관리해야하는 상태들을 atom 단위로 만들어놓고 해당 atom을 필요로하는 컴포넌트가 구독하여 사용하는 형식으로 동작한다.

 

Recoil 설치하기

npm i recoil

 

Recoil 준비하기

모든 컴포넌트를 RecoilRoot로 감싸주어야한다.

import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';
import { RecoilRoot } from 'recoil';

const queryClient = new QueryClient();

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

---

Atoms

• atom은 recoil에서 사용하는 상태의 단위이다.
• atom이 업데이트되면 해당 atom을 구독하고 있는 컴포넌트들이 모두 다시 렌더링 된다.
• atom을 생성하기 위해서는 고유한 키 값과 디폴트 값을 설정해야한다.

 

Atom 생성하기

import { atom } from "recoil";

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

 

Atom과 컴포넌트 연동하기

다양한 ReactHooks를 사용하여 atom과 컴포넌트를 연동시킬 수 있다.

const isDark = useRecoilValue(isDarkAtom);
: value를 가져오기

const setIsDark = useSetRecoilState(isDarkAtom);
: value를 수정하기

const [isDark, setisDark] = useRecoilState(toDoState);
: value를 가져오고, 수정하기

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDark = () => setDarkAtom ((prev) => !prev);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <button onClick={toggleDark}>toggle Mode</button>
        <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen={true} />
      </ThemeProvider>
    </>
  );
}

---