React Recoil 알아보기

새해가 밝았네요 다들 새해 복 많은 받으세요!

저번에 상태관리 와 Redux에 대해서 알아보았는데

이번엔 React 상태관리라이브러리 중 하나이며, 페이스북에서 직접 개발한 Recoil에 대해 알아보도록 하겠습니다

이전 상태관리 관련 글을 보고 오시면 이해가 조금 더 쉽습니다

(Redux 프로젝트 관련한 글을 조만간 작성하겠습니다..ㅠㅠ)

https://haruluka.tistory.com/38

상태 관리 및 Redux

React Recoil Git

https://github.com/jungHyeonS/react-recoil

GitHub - jungHyeonS/react-recoil: React Recoil Study

 

우선 Recoil를 설치해보도록 하겠습니다

설치

npm install recoil

 

recoil는 간단하게 npm install로 설치할 수 있습니다

그러면 이제 recoil에 개념들에 대해 알아보도록 하겠습니다

 

Atom

우선 Atom을 알아보도록 하겠습니다

아톰은 쉽게 접근한다면 store와 유사한 개념이며, recoil에서의 상태의 단위입니다

아톰이 업데이트가 되면 아톰을 사용하고 있는 모든 컴포넌트들의 상태가 리렌더링이 되는 구조이며

아톰은 고유한 id인 key로 구분이 되며, 여러 컴포넌트에서 아톰을 사용하고 있다면 각 컴포넌트들도 똑같은 상태를 공유하게 됩니다

 

즉 앞선 말씀드린 대로 상태의 단위라고 생각해주시면 됩니다

 

Atom 선언

아톰은 아래와 key, default 값을 사용하여 선언할 수 있습니다

//atom 선언
export const countAtom = atom({
  key : "countState", // 전역적으로 고유한 값
  default : 0 //초깃값
})

 

아톰을 선언했으니 이 아톰은 컴포넌트에서 사용하는 방법을 알아보도록 하겠습니다

아톰을 사용하는 방법은 아래와 같이 총 3가지로 구분이 됩니다

useRecoilState, useRecoilValue, useSetRecoilState

 

useRecoilValue

useRecoilValue 같은 경우는 아톰의 상태를 가져올 때사용을 합니다 즉 상태를 get 할 때만 사용할 수 있습니다

//get만 할경우
const count = useRecoilValue(countAtom);

 

useSetRecoilState

useSetRecoilState는 useRecoilValue와는 다르게 상태를 변경할 때 사용을 합니다 즉 상태를 set 할 때 사용할 수 있습니다

  //set만 할경우
const setCount = useSetRecoilState(countAtom)

 

useRecoilState

useRecoilState는 앞선 설명드렸던 2개의 훅을 합친 훅입니다. 즉 get, set를 동시에 할 수 있는 훅이며, 해당 훅을 주로 많이 사용합니다

//useRecoilState로 atom 데이터 사용
//useRecoilState hook은 atom의 상태를 get,set 할수있다
const [count,setCount] = useRecoilState(countAtom);
const increase = () => {
	setCount(count+1);
}

 

 

Selector

공식문서에 따르면 셀렉터는 dervied state, 즉 파생된 상태를 나타낼 수 있다고 나와있습니다

쉽게 설명을 드리자면 atom에 저장되어있는 상태를 그냥 가져오는 것이 아닌 get 프로퍼티를 통해 state를 가공한 후 가공된 값을 반환할 수 있습니다

마치 vuex에 getter와 비슷한 역할을 하고 있습니다

 

Selector는 아래와 같이 사용할 수 있습니다

//selector 선언
//selector는 전역상태 값을 기반으로 어떤 계산을 통해 파생된 상태를 반환하는 순수함수이다
export const countNextState = selector({
  key : "countNextState",
  get : ({get}) => {
    //countert상태를 가져오고 해당 상태에서 *2한값을 리턴합니다
    return get(countAtom) * 2;
  }
});

const DoubleCounter = () => {

  //useRecoilValue 훅으로 selectors에 접근할수있다
  const nextCount = useRecoilValue(countNextState);
  return (
    <div>
      <p>{nextCount}</p>
    </div>
  )
}

 

 

Recoil에서의 비동기 처리

Recoil에서는 Selector에 get을 사용하여 비동기처리를 구현할 수 있습니다

Redux 같은 경우는 비동기 처리를 하려면 redux-thunk 혹은 redux-saga와 같은 추가적인 미들웨어를 통해 수행을 해야 하지만 recoil 같은 경우는 리액트의 동작방식을 유사하게 동작합니다

//recoil 비동기 처리
export const randomDog = selector({
  key : "randomDog",
  get : async () => {
    const message = await getRandomDog();
    return message;
  }
})

 

음.. 그러면 API통신 같은 것을 할 때 보류 중인 데이터 즉 로딩 상태를 다루려면 어떻게 해야 될까요?

recoil에서는 보류 중인 데이터를 다루기 위해 React Suspense와 함께 동작하도록 디자인되어있습니다

 

Suspense

React.Suspense는 컴포넌트가 읽어 들이고 있는 데이터가 아직 준비되어있지 않았다고 리액트에게 알려줍니다

데이터 불러오기 시작 -> 렌더링 시작 -> 데이터 불러오기 완료 순서로 동작하는 로직에서 데이터 호출 완료 여부를 인지하여 데이터를 불러오기를 완료할 때까지 Fallback속성값으로 넣어준 컴포넌트를 표시합니다

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //Recoil 를 사용할려면 RecoilRoot를 감싸줘야한다
  <RecoilRoot>
    <React.Suspense fallback={<div>Loading...</div>}>
      <App />
    </React.Suspense>
  </RecoilRoot>
);

 

비동기 에러 처리하기

비동기 요청이 만약 실패를 한다면 해당 실패에 대한 처리를 해주어야 합니다

리액트에서는 컴포넌트에서 에러가 발생하면 모든 컴포넌트를 unmount 시킵니다. 이는 작은 에러가 발생하더라도 애플리케이션 전체가 중단될 수도 있습니다

 

여기서 Error Boundary라는 플러그인을 사용한다면 해당 문제를 해결할 수 있습니다

Error Boundary는 하위 컴포넌트 트리 어디에서든 에러를 리포팅하여 애플리케이션 중단대신 Fallback UI를 보여주는 플러그인입니다

 

설치 및 활용

npm i react-error-boundary

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //Recoil 를 사용할려면 RecoilRoot를 감싸줘야한다
  <RecoilRoot>
    <React.Suspense fallback={<div>Loading...</div>}>
      <App />
    </React.Suspense>
  </RecoilRoot>
);

 

 

매개변수가 있는 비동기 데이터 다루기

만약 API를 호출하는데 해당 API에 파라미터를 전달해야 되는 경우는 어떻게 해야 될까요?

Recoil에서는 atom + selector를 사용하여 매개변수가 있는 비동기 처리를 다룰 수 있습니다

countAtom에 상태가 변경이 됨에 따라 get메소드가 호출이 되는 로직입니다

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //Recoil 를 사용할려면 RecoilRoot를 감싸줘야한다
  <RecoilRoot>
    <React.Suspense fallback={<div>Loading...</div>}>
      <App />
    </React.Suspense>
  </RecoilRoot>
);