[Recoil] Facebook이 실험중인 상태관리 라이브러리 Part.1

Recoil이란? 🎈

2020년에 소개된 Facebook에서 실험용으로 만든 React 상태 관리 라이브러리

만들어지게 된 배경 🎈

Recoil은 state를 업데이트할때 공통 부모로 상태를 계속 끌어올리면서 너무 큰 dom tree가 계속해서 re-render 되고 상태가 만들어지고 리덕스를 사용하는 유저들의 불만이 꾸준히 증가하면서 페이스북이 오직 리액트를 위한 API와 동작을 최대한 React스럽게 유지하고 개선하려고 발표한 라이브러리다.

Recoil을 만든 Dave McCabe가 한 말에 의하면

"Well, I know that on one tool we saw a 20x or so speedup compared to using Redux. This is because Redux is O(n) in that it has to ask each connected component whether it needs to re-render, whereas we can be O(1)."
"글쎄요, 한 툴에서 Redux를 사용할 때보다 20배 정도 속도가 빨라진 것으로 알고 있습니다. 이는 Redux는 O(n)이기 때문에 연결된 각 구성 요소에 재렌더가 필요한지 물어봐야 하는 반면 우리는 (Recoil은) O(1)이기 때문이다.

Recoil이 O(1)이라는 말은 데이터가 저장되어 있는 atom을 수정할때 그 atom을 바라보는 컴포넌트들만

Atom이란 🎈

Atom은 어떤 컴포넌트에서도 사용하고 수정할수 있는 상태다. 만약 Atom이 업데이트 된다면 그 Atom을 바라보고 있는 컴포넌트들이 re-render 된다.

// 출처: Recoil 공식문서
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

Atom은 위와 같은 형태로 정의한다. key에는 다른 컴포넌트에서 사용할 state의 이름, default에는 state의 초기값을 설정한다.

UseRecoilState 🎈

이렇게 정의한 atom을 컴포넌트에서 사용할때는 설정해놓은 key값과 useRecoilState를 import 해와서 사용한다.

import { textState } from '/state.js'
import { useRecoilState } from "recoil";

// 출처: Recoil 공식문서
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>
  );
}

참고:
https://recoiljs.org/
https://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
https://ui.toast.com/weekly-pick/ko_20200616
https://www.ridicorp.com/story/how-to-use-redux-in-ridi/