Recoil 설치 + value 가져오기

0. install

npm install recoil

1. RecoilRoot

[index.tsx]

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

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

위와 같이 <RecoilRoot></RecoilRoot>로 감싸주기

2. atom 만들기

[atom.ts]

import { atom } from "recoil";

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

위와 같이 atom 파일을 따로 만들어준 뒤 key와 default 설정. default는 기본값 key는 원하는 고유값

3. value 가져오기

import { useRecoilValue } from "recoil";
const isDark = useRecoilValue(isDarkAtom);

위와 같이 import 해준 뒤 atom 값을 가져오면 isDark는 기본값인 false가 된다.