상태 관리 라이브러리 Recoil 이란?

Recoil

recoil이란 mobx → redux → recoil 순서대로 페이스북에서 만든 상태 관리 라이브러리이다.angular같은 경우 부모 컴포넌트에서 자식 컴포넌트 사이의 props를 주고받기 편하게 되어있다.주고 받을 수는 있지만 코드가 굉장히 복잡해지고 어디서 어떤 data를 받았는지, 내려줬는지 일일히 다 체크해야한다. 그래서 이 문제를 해결하기위해 상태 관리 라이브러리가 나왔다.

그림1)

첫번째 그림은 최상단 컴포넌트가 X 내려받을 컴포넌트가 Y 라고 가정했을 때

X → Y 로 데이터가 전달 되려면 저렇게 내리고 내리고 내리고... 해야 값을 받을 수 있다

그림2)

하지만 두 번째의 네모 역할이 상태 관리 라이브러리이다. 장바구니, 샵 이라고도 많이 불린다.

필요한 data를 저곳에 넣어 놓고 어디서든 꺼내서 사용하면 된다.

위에 예시는 간단한 구조라 쉽겠지만 트리구조가 길어지면 복잡해져서 거의 99%는 상태 관리 라이브러리를 사용한다고 생각한다. ( 글쓴이의 생각 )

 

 

그럼이제 recoil을 알아보자.

Installation

CRA(npx create-react-app)로 리액트 파일을 생성한 후 아래 cli로 리코일을 설치한다.

npm i recoil // or yarn add recoil

RecoilRoot

리코일 state를 사용하는 컴포넌트들은 <RecoilRoot>를 필요로 한다. <RecoilRoot>를 사용하는 가장 좋은곳은 root component이다.

// app.js
import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';    // import!!! import하는것은 important하닌까 ~

function App() {
  return (
    <RecoilRoot>    // 이렇게 감싸주어야한다.
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atom

아톰은 상태를 말하며 어떠한 컴포넌트에서 씌여지고 읽혀질 수 있다. 아톰의 va를 읽는 컴포넌트들은 암묵적으로 그 아톰에게 참고(subscribe)되어지고 있다. 그래서 아톰의 업데이트는 이 아톰을 참고하고 있는 컴포넌트를 리렌더 시킨다.

const textState = atom({
  key: 'textState', // unique ID (다른 atoms/selectors을 구별하기 위해서)
  default: '', // default value (aka initial value)
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

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

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

셀렉터는 하나의 추출된 state다. '추출된(derived 또는 파생된)'이라는 의미는 state가 변경(transformation)된것을 의미한다. 다시 말해서 추출된 상태란, 주어진 상태를 변경(modify)시키는 순수 함수에 의해서 변경된 스테이트(the output)라고 말할 수 있다.(실제 상태를 변경시키지는 않는거 같다.)

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

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

간단하게

import React from 'react';
import countState from './Atoms';
import { useRecoilState,
  useRecoilValue,
  useSetRecoilState,
  useResetRecoilState
} from 'recoil';

function Counter() {
  const [counter, setCounter] = useRecoilState(countState);
  // useState와 같지만, useRecoilState을 사용하여 다른 파일에 있는 아톰을 읽을 수 있다.
  const currentCount = useRecoilValue(countState);  // 읽기 전용!
  const counterHandler = useSetRecoilState(countState); // 값만 변경 시키기
  const resetCounter = useResetRecoilState(countState); // 디폴트값으로 값 변경

이정도 명령어만 알고있으면 좋을 것 같다.

뒤에 useRecoilState, useRecoilValue useSetRecoilState, useResetRecoilState 정도 알고있자.

recoil은 정말 hooks에 잘 맞게 나온 상태 라이브러리 같다.

 

틀린부분이 있으면 피드백 주시면 감사하겠습니다 :)