간단한 Recoil 사용법

Recoil은 상태 관리 라이브러리로 facebook에서 react 전용으로 만들어졌다.
🍈 따라서 React 환경에 좀 더 최적화 된 라이브러리라고 할 수 있다.
🥕 예를 들어 Redux는 순수 javascript 환경에서도 사용될 수 있다. 

기존의 상태 관리 라이브러리들보다 recoil은 배우기 쉽고 훅을 사용하기에 사용하기 편리한 장점을 지닌다.

npm install recoil
yarn add recoil

위와 같은 명령어로 recoil을 설치할 수 있다.

RecoilRoot로 하위 컴포넌트를 감싸 사용할 수 있다.

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

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

export const state = atom({
  key: 'key', // 유니크한 키 값
  default: 'default', // 초기값
});

atom은 상태의 일부를 나타내며, 어떤 컴포넌트에서도 사용할 수 있다.

atom을 사용하여 전역 상태를 선언할 수 있다.

atom에서 선언된 변수의 값이 바뀌게 되면, 그 상태를 사용하는 컴포넌트들이 리랜더링된다.

export const state = atom({
  key: 'state',
  default: {
  	name: "a",
    nickname: "b",
  },
});

export const stateSelector = selector({
  key: 'stateSelector',
  get: ({get}) => {
  		const data = get(state).nickname;
        return data;
    }
  },
});

selector를 통해서 더 디테일한 처리를 할 수 있다.

selector를 사용하여 캐싱을 할 수 있다.

비동기 처리를 하기 위해서 단순히 async 함수를 사용할 수 있다.

// store.js
export const stateSelector = selector({
  key: 'stateSelector',
  get: async ({get}) => {
    const res = await axios(API_호출);
    return res.name;
  },
});

// Component.js
function Component() {
  const data = useRecoilValue(stateSelector);
  return (
  		<div>
    		{data}
    	</div>
    );
}

필요에 따라서 상태와 상태 변경 함수를 모두 리턴하는 useRecoilState, 상태만 리턴하는 useRecoilValue, 상태 변경 함수를 리턴하는 useSetRecoilState을 사용할 수 있다.

  const [state, setState] = useRecoilState(key);
  const state = useRecoilValue(key);
  const setState = useSetRecoilState(key);

참고 자료 : https://recoiljs.org/ko/docs/introduction/getting-started

, https://recoiljs.org/ko/docs/guides/asynchronous-data-queries/

비동기 데이터 쿼리 | Recoil

Recoil 시작하기 | Recoil

 

✦ Future...

Recoil은 React 팀에서 관리하는 라이브러리로 큰 주목을 받았지만, 예상보다 업데이트 주기가 긴 탓인지? jotai나 zustand와 같은 라이브러리들이 요즘엔 더 각광받는 느낌도 조금 있는 것 같다.

https://github.com/facebookexperimental/Recoil/issues/1495

What's happening in the future of recoil? · Issue #1495 · facebookexperimental/Recoil

위와 같은 이슈에 최근까지도 코멘트가 달리면서, Recoil을 비롯한 React 상태관리 라이브러리들에게 좀 더 시간이 필요하지 않을까 싶다.

다만, 초점을 맞춰야 하는 부분은 프로젝트와 구현에 맞춰져야 하기에 무슨 라이브러리를 사용하느냐 보다는, 요구조건을 충족시키는 베스트 솔루션이 무엇인지 파악하는 능력 같다.