• Prop 의 이동경로

  // State Mangement 미사용
  App -> Router -> Coin Screen -> Chart
  
  // State Management 사용
  App <- (isDark) -> Chart
  

  • State Management 미사용시, App 컴포넌트 에서 isDark 가 필요한 곳은 Chart 컴포넌트 뿐이지만 Router, Coin Screen 컴포넌트를 지나가야하는 낭비가 발생합니다.
  • State Management 사용시, Prop isDark 를 Bubble 로 만들어 준 후 필요한 곳으로 가져다 쓸 수 있어서 효율적입니다.

• Recoil
  • 위의 버블을 사용한 작업을 가능하게 합니다.
  • 이해하기 쉽다, 홈페이지에 30분짜리 설명영상도 있습니다.
  • 우리가 위에서 이야기한 버블(Bubble) 을 Recoil 에서는 아톰(Atom) 이라고 표현합니다.
  • 아톰은 컴포넌트에 종속되지 않고 어플리케이션 어느 곳엔가 있다.
  • 이 전에 그리고 위에서 적었듯이 global state 를 어플리케이션의 분리된 공간에서 관리하는 것이 훨씬 나은 방법입니다.
  • 가장 중요한 점은 오직 value 가 필요한 component 만 그 value 를 가진다는 것 입니다
  • 아톰은 어느 것이든 둘 수 있습니다.

• Recoil 세팅

  • npm install recoil or yarn add recoil
  • index.tsx 로 가서 React Query 를 사용하며 App 컴포넌트를 감싸 줬던 것처럼 RecoilRoot 컴포넌트로 감싸줍니다.

  // index.tsx
  
  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(
    <RecoilRoot>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </RecoilRoot>,
    document.getElementById("root")
  );
  

• Recoil 아톰 생성(Atom; Bubble)

  1. src 폴더 안에 atoms.ts 파일을 생성합니다.

  2. export const isDarkAtom 과 같이 변수를 선언해주고 atom({key: "isDark", default:false},) 와 같이 키값(유일한 값)과 디폴트값(초기값)을 할당해줍니다.
     (import {atom} from "recoil";)

     // atoms.ts
     
     import { atom } from "recoil";
     
     export const isDarkAtom = atom({
       key: "isDark",
       default: false,
     });

• App 과 Chart 컴포넌트에 아톰 연결, 사용
  1. App 컴포넌트 내에서 useRecoilValue function 을 사용합니다.
     (import {useRecoilValue} from "recoil";)
  2. useRecoilValue 에서 isDarkAtom을 매개변수로 사용합니다. useRecoilValue(isDarkAtom)
     (import {isDarkAtom} from "./atoms.ts")
  3. const isDark = useRecoilValue(isDarkAtom) 을 작성해줍니다.
  4. 필요한 곳에 isDark 변수 상태관리에 사용합니다.
  5. Chart 컴포넌트에서도 위와 같이 진행해줍니다.

     // App.tsx
     
     import { useRecoilValue } from "recoil";
     import { isDarkAtom } from "./atoms";
       
     function App() {
       const isDark = useRecoilValue(isDarkAtom);
       return (
         <>
           <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
             <GlobalStyle />
             <Router />
             <ReactQueryDevtools initialIsOpen={true} />
           </ThemeProvider>
         </>
       );
     }

• isDarkAtom 값 수정 (간단한 방법, 최고의 방법은 아님)

  1. atom을 수정할 component로 바로 이동하여 원하는 위치에 button 혹은 원하는 태그를 생성해줍니다.

  2. value를 사용하기 위해 useRecoilValue 훅을 사용해줬던 것처럼 useSetRecoilState 를 사용하여 함수를 원하는 함수 이름의 변수에 선언, 할당 하여 줍니다.
     (React의 setState와 같은 방식으로 작동합니다.)

  3. button 태그에 onClick 이벤트 핸들러를 만들어 주고, 위에 useSetRecoilState를 사용하여 만들어줬던 함수 변수를 사용하여 해당 modifier function 으로 설정하고 싶은 값을 설정하여 주면 동작하고 간단한 Recoil 로 다크모드/라이트모드 기능 구현이 끝납니다.

     // coins.tsx
     
     function Coins({}: ICoinsProps) {
     const setDarkAtom = useSetRecoilState(isDarkAtom);
     const toggleDarkAtom = () => setDarkAtom((prev) => !prev);
     const { isLoading, data } = useQuery<ICoin[]>("allCoins", fetchCoins); // hook
     return (
       <Container>
         <Helmet>
           <title>Coins</title>
         </Helmet>
         <Header>
           <Title>Coins</Title>
           <button onClick={toggleDarkAtom}>Toggle Mode</button>
         </Header>
         ...

• Recoil을 이용한 Prop의 경로

  • coins 컴포넌트의 Header 컴포넌트에서 isDark의 상태 설정
  • App, Chart 컴포넌트는 atoms.ts에서 한 번에 가져와서 상태 적용

  // 간단한 다크모드/라이트모드
  
  Coins -> (isDark)
  App <- (isDark) -> Chart

다음 글에서는 간단한 To-Do List 를 작성하며 Recoil, State Management 라이브러리에 대해 더 공부해보겠습니다.