Recoil로 전역 팝업 State 관리하기(1)

매쉬업이라는 개발 동아리에서 만난 팀원들과 React를 사용해 프로젝트를 진행하면서, 기술 스택을 이야기해보던 중 React의 상태 관리 라이브러리로 새로 추가된 Recoil을 사용해보자는 의견을 받았습니다.
회사에서는 주로 전역 상태를 관리하기 위해 MobX와 Redux를 사용했었고 Facebook에서 Recoil을 배포했을 때, 문서를 대강 읽어보기만 하고 사용할 일이 없었기에 이번 기회에 사용해보기로 하였습니다.

이 포스트에서는 프로젝트에서 Recoil을 사용해 전역적으로 팝업을 관리했던 경험을 간단한 튜토리얼과 함께 공유드리고자 작성했습니다. Recoil 공식 페이지에도 자세한 문서가 있어 참고하셔도 좋을 것 같습니다.

설치와 RecoilRoot

React를 사용하는 프로젝트에서 다음을 입력해 Recoil을 설치합니다.

Recoil은 함수형 컴포넌트에서만 사용 가능하기 때문에 함수형 컴포넌트를 지원하는 버전 이상에서 설치하셔야 합니다.

npm install recoil // 또는 yarn add recoil

라이브러리를 설치하면서 타입이 같이 설치되기 때문에 TypeScript에서도 바로 사용가능합니다.

이후 Context API의 Provider와 같이 Recoil의 상태를 사용하는 컴포넌트를 RecoilRoot로 감싸주어야 합니다. 전역적으로 사용하기 위해서 React의 최상단인 src/App.js에 추가해줍시다.

// import React, Components, etc..
import { RecoilRoot } from 'recoil';
const App = () => (
  <RecoilRoot>
    <SomeComponent />
  </RecoilRoot>
);
export default App;

popupState 만들기

프로젝트를 진행하면서 만들었던 팝업의 경우, 모든 페이지에서 보일 수 있고 다른 컴포넌트에서도 팝업을 열 수 있도록 컨트롤해야하기 때문에 상태를 전역으로 관리했습니다.

Recoil에서 상태를 관리하기 위한 방법으로는 Atom이라는 개념을 사용합니다. Atom은 공식 문서에 따르면 상태의 일부를 나타내며, 어떤 컴포넌트에서나 읽고 쓸 수 있습니다. useRecoilState 등으로 atom의 값을 읽으면 그 컴포넌트는 자동으로 상태를 구독하게 됩니다.

팝업 리스트를 관리하기 위한 전역 State의 일부인 atom을 만들기 위해 src/states/popupState.js를 만들었습니다.

import { atom } from 'recoil';
const popupState = atom({
  key: 'popupState',
  default: [],
});
export default popupState;

key는 Recoil에서 사용하기 위해 유니크한 ID를 부여하는 값이며, default는 상태의 기본값입니다. 저는 여기서 제목이나 내용, zIndex처럼 팝업을 표현하기 위한 값들을 배열로 저장하려 합니다.

팝업을 표시하는 컴포넌트 만들기

src/App.js에서 팝업을 보여주기 위한 컴포넌트를 만들어봅시다. 저는 PopupContext라는 이름으로 팝업을 보여주는 컴포넌트를 만들었습니다.

// import React, Components, etc..
import { RecoilRoot } from 'recoil';
import PopupContext from './contexts/PopupContext';
const App = () => (
  <RecoilRoot>
    <SomeComponent />
    <PopupContext />
  </RecoilRoot>
);
export default App;

src/contexts/PopupContext.js를 작성합니다.

import React from 'react';
import { useRecoilValue } from 'recoil';
import popupState from '../states/popupState';
const PopupContext = () => {
  const popupList = useRecoilValue(popupState);
  return popupList.map((popup) => (
    // <Popup key={popup.title} {...popup} />
  ))
};
export default PopupContext;

useRecoilValue라는 함수를 통해 atom을 읽습니다. useRecoilValue는 읽기 전용 함수로 상태를 변경할 수 없습니다. atom을 읽음으로써 PopupContext는 popupState를 구독하는 상태가 되었습니다.

다음 포스트에서 팝업을 꾸미고 추가/제거하는 방법을 설명하도록 하겠습니다.