상태 관리 도구, 그리고 말도안돼 Recoil

"상태 관리는 애플리케이션의 마음입니다." - Kent C. Dodds

상태 관리 도구

먼저 상태란 무엇일까?

동적으로 표현되는 값, 변하는 데이터이다.

 

자식 컴포넌트 간의 직접적은 데이터 전달은 불가능하고

부모 컴포넌트를 통해(props) 값을 주고 받아야 한다.

 

그렇게 자식 컴포넌트가 많아지고 넘겨 주어야할 값이 많아진다면

상태 관리가 복잡해지고 Props drilling이 발생한다.

 

대가리 펑펑

이런 복잡한 상태관리를 해결해주는  super fancy 한 라이브러리를 사용하면 된다.

이러한 상태관리 도구는 전역 상태 저장소를 제공하며 Props drilling 이슈를 해결하여 상태관리를 효율적으로 처리할 수 있다.

 

말도안돼 Recoil

Facebook에서 2020년 발표한 라이브러리이며, React 전용 라이브러리이다.

 

Recoil의 특징은

단순하고 직관적이며 React 문법에 친화적이다. React의 state처럼 간단한 get/set 인터페이스로 사용할 수 있다.

비동기 처리를 추가 라이브러리 없이 간단하게 가능하다.

 

---

 

npm install recoil

 

---

 

RecoilRoot

컴포넌트에서 Recoil state를 사용하기 위해서는 컴포넌트 ReocilRoot를  감싸주어야한다.

import { RecoilRoot } from "recoil";

const App = () => {
  return (
    <RecoilRoot>
      <Routers />
    </RecoilRoot>
  );
};

 

Atoms

Atoms은 상태 단위이며 업데이트와 구독이 가능하다. 

Atoms를 설정할 때는 atom() 사용한다. key와 default값을 필수로 선언해야한다.

 

key : 내부적으로 atom을 식별하기 위한 고유한 문자열이다.

default : atom의 초기값이다.

 

사용

useRecoilValue(atom) (상태값)

useSetRecoilState(atom) (setter 함수)

useRecoilState(atom) [상태값, setter 함수]

 

등 으로 atom을 의 값을 사용할 수 있다.

 

Selectors

전역 상태 값을 기반으로 어떤 계산을 통해 새로운 값을 내뱉는 순수함수이다.

atom이나 다른 selector를 통해 값을 입력 받을 수 있다.

 

get 함수는 읽기만 가능한 객체를 내보내며

set 함수는 쓰기 가능한 RecoilState 객체를 반환한다.

 

set 함수의 두번째 argument는 상태를 업데이트할 때 전달되는 값이다.

 

import { atom, selector } from "recoil";

export const minutesState = atom({
  key: "minutes",
  default: 0,
});

export const hourSelector =
  selector <
  number >
  {
    key: "hours",
    get: ({ get }) => {
      const minutes = get(minutesState);
      return minutes / 60;
    },
    set: ({ set }, newValue) => {
      const minutes = +newValue * 60;
      set(minutesState, minutes);
    },
  };

 

 

뭐.. 끝이다.

아직 Recoil에서 비동기 요청 함수를 사용해보지 않아서 나중에 더 공부한 후 추가하도록 하겠다.

 

Reocil은 말도안돼 직관적이고 간단하며 세팅이 쉽다.

하지만 아직 다소 안정성이 떨어지는 라이브러리라 소규모 프로젝트를 할 때 사용하면 좋을 것 같다.

아마 나도 이번 아이디어 페스티벌에서 Reocil 라이브러리를 사용할 것이다!