[React] Recoil 사용 방법 / 공식문서를 통해 알아보기

Recoil을 전역 상태관리 라이브러리로 리액트 친화적인 문법과 그 사용이 간편한 라이브러리로 CNU SW 아카데미 TA님에게 추천받은 상태관리 라이브러리이다. 리덕스는 그 이후에 사용할 것이기 때문에 우선, recoil의 사용방법에 대해 포스팅하고자 한다. 

 

이 글을 읽으면 아주 기본적인 recoil 사용방법을 알게 될 것이다. 

 

Recoil 설치

npm install recoil

 

RecoilRoot

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

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

recoil의 상태를 사용하는 컴포넌트는 부모트리 어딘가에 나타나는 RecoilRoot가 필요하다고 한다. 공식 홈페이지에서는 루트 컴포넌트에 넣는 것을 추천한다.

 

Atom

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

 

recoil에서는 Atom이 상태이고 전역적인 값이다. recoilRoot 자식 컴포넌트에서 사용할 수 있으며 atom의 값을 읽는 컴포넌트는 암묵적으로 atom을 구독하여 atom이 바뀌게 되면 atom을 구독하는 컴포넌트들이 재렌더링 된다고 한다.

 

Atom 사용법

const [text, setText] = useRecoilState(textState);

다른 컴포넌트에서 useRecoilState()훅을 이용하여 인자로 atom을 넘기면 atom을 참조하는 데이터와 atom을 업데이트하는 함수를 얻을 수 있다. 

 

Selector 

 

Selector는 상태(state)를 입력으로 받아 변형하여 반환하는 순수 함수를 거쳐 반환된 값이라고 한다. atom의 상태는 selector를 활용하여 atom의 state를 필요한 형태로 바꿀 수 있다. atom 의 state가 변하면 selector의 state도 같이 변한다.

 

Selector 사용법

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

위의 get안에 있는 textState는 atom으로 선언했던 state이다. text의 state를 text.length로 변환하여 반환하는 selector이고 textState가 변하면 자동으로 변하게 된다.

 

 

비동기와 관련해서는 아직 실력이 부족하고 프로젝트도 많이 많들어보지 않았기 때문에 현재로서는 설명하기 어렵지만 차후에 설명을 진행할 예정이다.

 

 

Reference

https://hgko1207.github.io/2022/07/25/react-6/

[React] Recoil 사용 방법