Getting Start Recoil

실무에서 아직 상태 관리 라이브러리를 사용해본 경험이 없는데 곧 그 중 하나인 Recoil을 도입할 예정이다. 간단히 알아본 결과 많은 곳에서 사용하는 Redux에 비해 사용성이 굉장히 손쉬운것 같다는 느낌을 받았다. 라이브러리 도입의 시작이자 핵심인 도입방법을 정리해보려고 한다.

Getting Start Recoil

---

1. 설치

npm install recoil

2. Recoil Root 설정

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

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

3. atom 설정

const textState = atom({
  key: 'textState', // ID를 key로 지정
  default: '', // default value 지정
});

4. 데이터의 사용

const charCountState = selector({
  key: 'charCountState', // 설정했던 ID 해당 데이터를 조회
  get: ({get}) => {
    const text = get(textState);
    return text.length;
  },
});

const CharacterCount = () => {
  const count = useRecoilValue(charCountState);
  return <>Character Count: {count}</>;
}

---

단순히 Recoil에서 제공하는 Docs에서 getting start 부분을 적어본 것이지만, 마치 그저 useState를 사용하는 것 같이 매우 간편하다고 느꼈다.

조만간 recoil을 사용해보고 다른 상태 관리 라이브러리인 redux와 contextAPI에 대해서도 알아봐야 겠다.

 

 

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