이번에 빗썸 테크 아카데미에 참여해서 수업과 프로젝트 등을 진행도 하고 개인적인 일정들이 많다 보니 블로그를 쓸 시간이 부족했다.. ㅠㅜ
그래도 이번에 프로젝트를 진행하면서 간단하게나마 사용하게 되었던 Recoil에 대해 글을 적어보려 한다.
현재 직장에서는 Redux Took Kit을 사용하는데 직장 동료분께서 Recoil을 개인 프로젝트에서 사용해본 적이 있었는데 굉장히 인상적이었다는 이야기를 듣고 궁금증을 가지고 있었다.

근데 이번에 팀 프로젝트를 진행하다가 State 관리를 해야 하는 상황이 생겼는데 이 때다 하고 Recoil을 사용해보게 되었다. 우선 공식 홈페이지를 보니 일반 Redux나 내가 사용했던 RTK 보다 간결해 보였다.

설치

# npm
npm install recoil
# yarn
yarn add recoil

적용

import React from 'react';
import {
  RecoilRoot
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

설치나 적용하는 방법도 굉장히 간단했다.

상태

import { atom } from 'recoil'
import {Network, Page} from "../enum/enum";

export const recoilPageState = atom({
  key: 'pageState',
  default: Page.ACCOUNT,
})

상태 설정도 이 코드가 전부이다.

사용

import { recoilNetWork, recoilPageState } from '../states/recoilPageState'
import { useRecoilState } from 'recoil'

const AccountComponent = () => {
	const [page, setPage] = useRecoilState(recoilPageState)

	return(
    	<div>페이지: {page}</div>
    )
}

사용하는 방법도 useState()와 굉장히 유사하다. useRecoilState을 Recoil에서 import 해서 [state, setState] 튜플에 할당해서 사용하면 된다.
만약 나는 value만 가지고 오고 싶다면 useRecoilValue을
set함수만 가지고 오고 싶다면 useSetRecoilState를 호출해서 사용하면 된다.

비동기 처리

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

function MyApp() {
  return (
    <RecoilRoot>
      <React.Suspense fallback={<div>Loading...</div>}>
        <CurrentUserInfo />
      </React.Suspense>
    </RecoilRoot>
  );
}

우선 프로젝트에서는 동기방식만을 사용해서 비동기 처리를 하지 않았는데 공부하는 과정에서 찾아보니깐 비동기 처리도 간단했다. 비동기 처리를 할 때는 Selectors을 사용해서 구현하고 보류 중인 데이터에 대한 정의를 해주어야 하는데 이것은 React Suspense를 사용하여 처리해주면 된다. 이런 기능 외에도 Loadable을 이용한 비동기 제어, Concurrent Requests(동시 요청), Pre-Fetching 등의 다양한 기능들을 제공해주는 것 같다. 이번에 진행한 프로젝트에서는 간단한 상태 관리 기능만 사용한 터라 Recoil에 깊숙이 들어가 사용할 기회는 없었지만 업무에 적용해서 사용하게 된다면 활용할 수 있는 것들이 정말 많다고 느꼈다.

결론

React에서 정식으로 출시한 전용 라이브러리라서 그런지 설치, 적용, 상태 설정하는 방법이 간단하고 쉬웠다. Hook으로 사용하는 방법 또한 React 문법과 유사해 어려움이 없었다. 비동기 처리도 Selectors와 Suspense에 사용하여 깔끔하게 처리할 수 있는 방법이라고 생각이 들었다.

하지만 단점도 있다고 한다. 직접 느끼지는 못했지만 이렇다 할 개발자 도구가 없고, Recoil API의 안정성에서도 신뢰가 아직은 부족하다고 한다. 그리고 무거운 프로젝트에서 Recoil을 적용해서 사용한 사례가 많이 없다고 하니 Recoil이 쉬우니깐 무조건 사용한다기보다 프로젝트 환경에 맞추어서 Redux나 Recoil을 선택해서 사용하는 게 제일 좋은 방법인 것 같다. 나부터 업무에 적용해서 사용하고 싶은데.. 이미 Redux를 사용하니.. 아쉬운 부분이다..

출처: https://recoiljs.org/ko/docs/introduction/getting-started