Recoil - 새로운 리액트 상태관리 라이브러리

Recoil?

A state management library for React / 리액트를 위한 상태관리 라이브러리

 

리액트의 상태관리란?

 

또 다른 상태관리 라이브러리 Redux의 작동 방식

1. 상태가 변경되면 액션을 통해서 리듀서에 전달
2. 리듀서에서 상태를 변경해 스토어에 저장
3. 스토어에서 상태가 변경되면 해당 상태를 사용하고 있는 컴포넌트에 변경된 상태 전달

▶ 초기 세팅이 복잡하고, 상태 하나만 변경하려 해도 너무 많은 코드가 필요하다!!

3년 안에 사라질 것 같은 기술 1위로 뽑히기도..

그래서 등장한 Recoil!

• 확 줄어든 보일러 플레이트 코드들
• 낮은 러닝 커브
• hook 형태로 상태변화가 이뤄짐

 

Recoil 시작하기

npm install recoil

혹은

yarn add recoil

 

Recoil 초기 세팅

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

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

프로젝트 최상단에 'RecoilRoot'를 설정해줌. store, reducer 등등 설정할 필요없이 매우 간단하게 초기 세팅이 끝남!

 

Atom

• 하나의 상태를 의미
• 리액트의 state, props와 비슷하나 리덕스 store의 상태들처럼 구독가능
• atom 값을 변경하면 해당 atom을 구독하고 있는 모든 컴포넌트들이 리렌더링

import { atom } from 'recoil';

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

 

지원하는 hook 함수

atom 생성 후 component에서 해당 atom을 사용할 땐 useState를 통해 hook을 사용하는 것처럼 Recoil에서도 다양한 hook 함수를 제공하고 있음

• useRecoilState: useState와 유사. 변경되는 값과 해당 값을 변경하는 함수 반환
• useRecoilValue: 구독하는 값만 반환
• useSetRecoilState: 구독하는 값을 변경하는 함수 반환
• useResetRecoilState: 값을 기본값으로 reset 시키는 함수 반환

 

selector

• atom의 상태에 의존하는 동적인 데이터를 생성
• get 함수를 통해 atom 정보들을 1개 이상 가져올 수 있음
• 한개 이상의 atom 정보를 업데이트 하도록 set 함수를 받을 수 있음

 

비동기 호출

• selector에서는 비동기 호출에 대한 데이터 처리도 지원
• React의 suspense를 지원하기 때문에 비동기 처리를 위해 별도의 작업이 필요 없음
• redux 대비 비동기를 처리하는 별도의 미들웨어도 필요 없음

▼github에서 recoil의 star 갯수를 가져오는 비동기 예시

import { selector } from 'recoil';

// 비동기 처리 셀렉터
export const recoilStarCountState = selector({
    key: 'asyncState',
    get: async () => {
        const response = await fetch('https://api.github.com/repos/facebookexperimental/Recoil');
        const recoilProjectInfo = await response.json();
        // stargazers_count 반환
        return recoilProjectInfo['stargazers_count'];
    },
});

import { useRecoilValue } from 'recoil';
import { recoilStarSelector } from '../../../recoil/count';

function RecoilStarCount() {
    const recoilStarCount = useRecoilValue(recoilStarSelector);

    return (
        <>
            <p>recoil gitbub star 갯수 </p>
            <p>{recoilStarCount}개</p>
        </>
    );
}

export default RecoilStarCount;

<React.Suspense fallback={<div>로딩중입니다.</div>} > // suspense 를 통한 비동기 처리
	<RecoilStarCount />
</React.Suspense> 

 

 

참고

• recoiljs.org/ko/
• blog.woolta.com/categories/1/posts/209
• velog.io/@wooder2050/%EB%A6%AC%EC%BD%94%EC%9D%BCRecoil%EB%8A%94-%EC%99%9C-%EB%A7%8C%EB%93%A0-%EA%B1%B4%EB%8D%B0
• im-developer.tistory.com/214