이번 챕터에서는 여러 상태 관리 라이브러리 중에서도 리액트에 최적화되어 있는 상태 관리 라이브러리인 리코일의 사용법과 3장에서 리액트 툴킷을 활용해 구현했던 계산기와 투두리스트를 리코일을 활용해 다뤄보도록 하겠습니다. 리코일을 사용하기 전에  설치 및 환경 설정을 진행하겠습니다.

4.2.1 Recoil 사용 환경 세팅하기

먼저  React 프로젝트가 없다면,  React 애플리케이션을 생성하고 진행하도록 하겠습니다.

npx create-react-app calc-todo
cd calc-todo

생성한 프로젝트 디렉토리로 이동 후, 터미널을 열고, 리코일 라이브러리를 설치합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

npm으로 설치하는 경우 다음과 같은 명령어를 입력해주세요.

npm install recoil

혹은 yarn으로 설치하는 경우 다음과 같은 명령어를 입력해주세요.

yarn add recoil

설치가 완료됐으면 npm start , yarn start로 리액트 프로젝트를 실행해주세요.

4.2.2 상태 관리 설정 (RecoilRoot)

리코일을 사용하기에 앞서 RecoilRoot 컴포넌트에 대해서 알아보도록 하겠습니다.

RecoilRoot 컴포넌트는 전역 상태를 관리하고 애플리케이션 내에 모든 컴포넌트가  전역 상태의 동일한 값을 공유할 수 있게 해주는 컴포넌트입니다 . 마치  리덕스에서 Provider를 이용하여 스토어를 설정했던 것과 비슷하게  리코일을 사용해서 상태를 관리하려면 전역 상태를 사용할 컴포넌트를  RecoilRoot 컴포넌트로 감싸 선언해 주어야 합니다.

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

위와 같이 Root 컴포넌트를 RecoilRoot 컴포넌트로 감싸줌으로써 모든 컴포넌트에서 전역 상태를 사용할 수 있도록 해줍니다. 물론 RecoilRoot를 애플리케이션의 최상위 레벨 컴포넌트로 감싸주지 않아도 Recoil을 사용할 수 있지만, RecoilRoot를 최상위에 두는 것은 코드의 가독성과 효율적으로 유지 보수를 관리할 수 있습니다. 또한, Recoil 공식 문서에서 RecoilRoot를 Root 컴포넌트로 추가하는 것을 권장하고 있습니다.