use State Management 를 해주는 Recoil에 관한 글

Recoil 설치법

 

npm install recoil

yarn add recoil

 

https://recoiljs.org/ko/docs/introduction/getting-started

Recoil 시작하기 | Recoil

 

Recoil이 필요한 이유

 

App 만든 state를 여러 provider에서 사용하려 할 때  계속해서 아래로 전달 전달하는 식으로 사용해야하기에 매우 불편하다

 

만약 dark,light 모드나 로그인하였을 때 다르게 변하는 state들을 사용하려고 할 때 작업환경이 매우 복잡해질 것이다.

 

그래서 Recoil 에서는 Atom 이라는 globlaState를 제공하여 원하는 provider에서 바로 불러와서 사용이  가능한 유용한

 

React를 위한 상태 관리 라이브러리다

 

 

사용법

 

1. RecoilRoot를 부모트리에 넣어주기.

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

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

RecoilRoot로 감싸준다. 

 

 

2. atoms.ts 파일 만들어 atom 저장하기

import { atom } from "recoil";

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

 

3.atoms 파일에서 원하는 atom 불러오기

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

export default App;

 

4. atom 안에 있는 value 값을 변경하고 싶을 때, useSetRecoilState()

  const isDarkSet = useSetRecoilState(isDarkAtom);
  const toggleDark = () => isDarkSet((current) => !current);
  return (
    <Container>
      <Helmet>
        <title>코인</title>
      </Helmet>
      <Header>
        <Title>코인</Title>
        <button onClick={toggleDark}>Toggle Mode</button>