Recoil 기초

Recoil은 뭘까

Recoil은 리액트 전용 상태 관리 라이브러리이다. 2020년 5월에 페이스북에서 출시된 나름 최신 툴이다
이전의 전역 상태관리 라이브러리들이 문제가 있었던 것은 아닌데 리액트 전용이 아닌점에서 Recoil에 밀린 듯하다

그 예시를 들자면 아래와 같다

• 복잡합 Boiler Plate 초기 세팅이 요구된다
• 비동기 데이터에 추가 리소스가 요구 된다.

Recoil은 왜 쓸까?

1. 전역 상태의 설정/정의가 매우 쉽다
2. Recoil이 지원하는 hooks로 get/set 하기 때문에 리액트 문법과 매우 유사하다
3. Boiler Plate 양이 현저히 적다

yarn add recoil

실습

일단 recoil 디렉터리를 만들고, state.jsx를 만들고 아래 코드를 입력한다.

// atom, selector란 개념이 있다
import {atom} from "recoil";
export const numberState = atom({key: "numberState", default: 0});

이제 numberState는 일종의 전역 변수라 생각하면 편하다. default 값이 0이고 key 값은 numberState이다.

다음은 리액트 기본 프로젝트 기준으로 main.jsx 코드에 RecoilRoot를 추가해야 한다
Recoil을 모든 페이지의 근본이 되는 APP에 적용하기 위함이다

import {RecoilRoot} from "recoil";


ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <RecoilRoot>
        {" "}
        <App />
      </RecoilRoot>
    </BrowserRouter>
  </React.StrictMode>,
);

여기까지 했으면 아래 페이지를 봐보자
home, write, list를 클릭하면 페이지를 이동할 수 있고, 아래 작게 7로 써진 부분이 카운트인데 카운트의 값이 공유 된다

실제 코드를 봐보자 아래는 각 페이지의 공통 폼이 되는 코드이다. 페이지 이름만 다르다

import {Box, Button} from "@mui/material";
import {numberState} from "../../recoil/state";
import {useRecoilState, useRecoilValue} from "recoil";

export default function Home() {
  const [numberCount, setNumberCount] = useRecoilState(numberState);
  const getNumber = useRecoilValue(numberState);
  return (
    <Box>
      <Box>
        <Button
          variant="outlined"
          onClick={() => {
            if (numberCount <= 0) {
              setNumberCount(0);
            } else {
              setNumberCount(numberCount => numberCount - 1);
            }
          }}>
          recoil minus button
        </Button>
        <Button
          onClick={() => {
            setNumberCount(numberCount => numberCount + 1);
          }}>
          버튼! recoil plus button
        </Button>
      </Box>
      <Box>{numberCount}</Box>
    </Box>
  );
}

핵심은 numberCount와 setNumberCount이다.

useRecoilState()의 첫 요소는 상태 값이고, 두 번째 요소는 주어진 값을 업데이트하는 setter이다.
주어진 값을 업데이트 할 수 있다. 즉 number이란 전역 값을 수정 하고 읽을 수 있다.

useRecoilValue()는 getter이다. number의 값을 읽어 온다.
선언된 numberCount와 setNumberCount를 이제 Button의 이벤트에 입력하면 모든 페이지에서 주어진 state를 접근 할 수 있다

레퍼런스

• Recoil 전역 상태 관리 라이브러리 - recoil 정복기
• Recoil 문서
• [[Notes/React 왜 쓸까|리액트]]