[전역상태관리] Recoil

시작하며

개인 포트폴리오를 만드는 과정에서 다크모드를 구현해보고 싶어 구현 하던중
최상위에서 상태를 관리해야 효율적이겠다는 생각이 들어 전역상태관리 라이브러리인 Recoil을 사용해보았다.
전에 팀 프로젝트에서도 Recoil을 써본 경험이 있는데, Redux보다 설정하는게 쉽고 간단해서 다시 써보게 되었다.

Recoil

Recoil은 페이스북에서 만든 React를 위한 상태 관리 라이브러리이다.
Recoil을 사용하면 atom(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 형태로 만들 수 있다.

설치

npm install recoil

세팅

최상위 루트에 RecoilRoot를 감싸준다.

app.js에 감싸줘도 되고 index.js에 감싸줘도 된다.

// app.js
import {RecoilRoot} from 'recoil';
import Home from './pages/home';

function App() {
  return (
    <>
      <RecoilRoot>
        <Home />
      </RecoilRoot>
    </>
  )
}

ThemeProvider, GlobalStyle도 같이 감싸주느라 index.js에 RecoilRoot를 감싸주었다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <RecoilRoot>
        <App />
      </RecoilRoot>
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

사용

Atoms는 상태(state)의 일부를 나타낸다. Atom은 어떤 컴포넌트에서나 읽고 사용할 수 있다.

폴더 & 파일 생성

recoil폴더를 생성하고 파일을 만들어준다. (다크모드에 상태에 따른 상태를 만들거라 darkmode.js 파일 생성)

데이터 설정

Recoil의 atom function을 사용하여 필요한 데이터를 설정한다.
atom은 두 가지를 요구한다.

1. key 즉, unique ID.
2. default 즉, 초기값.

//recoil/darkmode.js

import { atom } from 'recoil'; // atom 매서드 불러오기

const darkmode = atom({
  key: 'darkmode', // 고유 ID 설정
  default: false, // 초기값 설정
});

export { darkmode };

읽기 전용

상태를 변경하거나 하지 않고 그냥 상태의 값을 불러오며 읽기만 할 때 사용하는 Recoil전용 매서드가 있다.

useRecoilValue()

import { useRecoilValue } from 'recoil'; // 읽기 전용 매서드 불러오기
import { darkmode } from '../../recoil/darkmode'; // 데이터 상태 불러오기

const Projects = () => {
  const isDark = useRecoilValue(darkmode); // atom에 저장된 데이터를 컴포넌트에 변수로 할당
  console.log(isDark); // 값이 나옴. 
  
  return ()
}

읽고 쓰고 할때

atom혹은 selector의 값을 읽고 쓰려고 할 때 사용한다.
useState()와 비슷한 형태로 사용할 수 있다. 다만 기본값 대신 recoil의 상태로 인자를 받는다.
상태가 업데이트되면 자동적으로 리렌더링이 일어난다!!!

useRecoilState

import { useRecoilState } from 'recoil'
import { darkmode } from '../../recoil/darkmode';

const DarkmodeBtn = () => {
  const [isDark, setIsDark] = useRecoilState(darkmode);
  const onClickBtn = () => {
    setIsDark(!isDark);
  }
  
  return (
    <div>
      <button onClick={onClickBtn}>
        다크모드로 보기
      </button>
    </div>
  )
}

변경만 하고 싶을 때

Recoil 상태의 값을 업데이트하기 위한 setter 함수를 반환한다.
이 hook은 상태를 읽지 않고 쓰기만 하고 싶을 떄 추천!

useSetRecoilState()

// 편의를 위해 import 구문 생략
const setIsDark = useSetRecoilState(darkmode);

값을 초기화하고 싶을 때

atom이나 selector의 값을 초기화하고 싶을 때 사용한다.

useResetRecoilState()

atom의 경우! (selector의 경우는 다르게 작성해야함)

const resetCount = useResetRecoilState(countState);

---

Recoil의 atom에 대한 기본적인 사용 방법을 포스팅을 해보았다.

다음엔 더 학습하여 Recoil의 selector(순수 함수)를 사용하는 방법에 대해 포스팅을 해보겠다.