[TIL] 간단한 Recoil 첫 사용기

💡 TIL 20230814

리액트 프로젝트를 빌드하면서 상태관리 라이브러리는 당연하게도(?) Redux만 써봤었다. 하지만 세상에 당연한 것은 없는 법.. Recoil, Zustand, Jotai 등 다른 상태 관리 라이브러리도 써보고 싶다는 생각에 먼저 Recoil부터 설치해서 사용해보게 되었다.

---

1. Recoil이란?

Recoil은 페이스북이 만든 상태 관리 라이브러리이다. React 전용으로 나온 상태 관리 라이브러리인 만큼 리액트에서 최적화되어 작동한다.

 

출처 https://recoiljs.org/ko/

아래는 Recoil 공식 홈페이지에서 소개하는 Recoil의 특징인데 설명이 뭔가 귀엽다.

 

출처 https://www.youtube.com/watch?v=_ISAA_Jt9kI&t=448s

리액트 공식 유튜브에서 설명하는 Atom의 개념도이다. redux에서는 store라는 중앙 상태 관리소에 담아두고 관리하는 개념이었다면, 리코일에서는 뭔가 공중에 떠다니는 literally 원자들의 개념 같아서 귀엽다.

암튼, 이 atom들은 어느 컴포넌트에 한정되어 있지 않고 공중 어딘가에 떠있고, atom 중 하나가 필요하다면 해당 컴포넌트에서 공중에 떠있는 atom들 중 필요한 atom을 가져다 쓰는 개념이라고 이해하면 된다.

 

 

---

2. 세팅

다른 상태관리 라이브러리가 그러하듯이, 설치를 하고 루트 컴포넌트에서 몇 가지 설정을 해주어야 한다.

 

1) 설치

아무 생각 없이 yarn add recoil만 해놓고 사용하는데 자꾸 에러가 나서 ..설마(???) 했는데 타입스크립트에서는 @types/recoil도 함께 설치해주어야 한다.

yarn add recoil @types/recoil

 

2) index.tsx

• 루트 컴포넌트를 <RecoilRoot></RecoilRoot>로 감싸주어야 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';

import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';

import { RecoilRoot } from 'recoil';

import App from './App';

const queryClient = new QueryClient();

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

Recoil을 사용할 준비는 끝났다. 아래부터는 다크모드 상태관리 예시로 recoil 사용법을 정리하려고 한다.

 

3) atoms.ts

• Atom은 state의 일부를 나타낸다.
• Atom들은 <RecoilRoot></RecoilRoot>로 감싸진 어느 컴포넌트에서나 읽고 쓸 수 있다.
• atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 따라서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트가 재렌더링되는 결과가 발생한다.
• atom에 고유한 key를 주고, 기본값(redux의 initialState 개념)인 default값을 설정할 수 있다.

import { atom } from "recoil";

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

 

 

---

3. 사용 방법

React를 위해 만들어진 상태 관리 라이브러리라 그런지, 사용방법이 대체로 useState 훅을 사용하는 것과 비슷했다.

1) useRecoilValue()

• 컴포넌트에서 atom을 읽기 위해 useRecoilValue() 훅을 사용하여 아래와 같이 코드를 작성하면 된다.
• useRecoilValue(안에는 Atom을 넣어준다)

import { ThemeProvider } from 'styled-components';
import { darkTheme, lightTheme } from './styles/theme';
import GlobalStyle from "./styles/GlobalStyle";
import Router from "./routes/Router";

import { useRecoilValue, useSetRecoilState } from "recoil";
import { isDarkAtom } from './recoil/atoms';

import styled from "styled-components";
import ToggleButton from "react-dark-mode-toggle";

const App = () => {
  const isDark = useRecoilValue(isDarkAtom); // 설정해준 atom 가져오기
  
  const toggleDarkAtom = () => setDarkAtom(prev => !prev)
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <DarkModeToggleBtn
          checked={isDark}
          size={50}
          speed={1.5}
        />
        <Router />
      </ThemeProvider>
    </>
  );
};

export default App;

const DarkModeToggleBtn = styled(ToggleButton)`
  position: absolute;
  top: 3vh;
  right: 3%;
`

 

2) useSetRecoilState()

• 이제 토글 버튼을 누를 때, 이 atom의 상태를 변경하기 위해서 useSetRecoilState()훅을 사용하여 setter 함수를 만들어주면 된다.
• useSetRecoilState()는 매개변수로 atom을 받고, atom을 변경하는 함수를 반환한다.
• React의 일반적인 setState 함수와 같은 원리로 작동한다고 볼 수 있다.

import { ThemeProvider } from 'styled-components';
import { darkTheme, lightTheme } from './styles/theme';
import GlobalStyle from "./styles/GlobalStyle";
import Router from "./routes/Router";

import { useRecoilValue, useSetRecoilState } from "recoil";
import { isDarkAtom } from './recoil/atoms';

import styled from "styled-components";
import ToggleButton from "react-dark-mode-toggle";

const App = () => {
  const isDark = useRecoilValue(isDarkAtom);
  const setDarkAtom = useSetRecoilState(isDarkAtom); // setter 함수
  const toggleDarkAtom = () => setDarkAtom(prev => !prev) // setter 함수를 이용하여 토글함수 정의
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <DarkModeToggleBtn
          onChange={toggleDarkAtom}
          checked={isDark}
          size={50}
          speed={1.5}
        />
        <Router />
      </ThemeProvider>
    </>
  );
};

export default App;

const DarkModeToggleBtn = styled(ToggleButton)`
  position: absolute;
  top: 3vh;
  right: 3%;
`

 

 

---

참고 사이트

Recoil 공식 한국어 문서