리코일?

리코일이란?

페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리

왜 쓰는가?

1. 적은 코드량, 쉬운 러닝 커브

2. 렌더링 최적화
   Context에서는 상태변경시 구독한 하위 컴포넌트들이 모두 재렌더링 되는 문제가 있었는데, Recoil은 atom, selector를 구독하면 구독한 컴포넌트만 재렌더링이 일어난다.

3. 간편한 비동기 처리
   Recoil에서는 자체적으로 selector에서 지원을 한다.

4. 테스팅
   unstable이지만 스냅샷으로 테스팅도 간편하다.

Recoil은 사용법이 간단하면서도 강력한 기능을 가졌다. 그럼에도 불구하고, Recoil은 안정화 단계가 아니만큼 불안전성이 존재한다.

사용방법

0. RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요

1. Atom

Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 렌더링 되는 결과가 발생할 것이다.

// src/atom/Todolist.js
import { atom, selector } from "recoil"


export const todoListState = atom({
    key: "todoListState",
    default: [
        {
          id: 1,
          title: '계란 2판 사기',
          done: false,
        },
        {
          id: 2,
          title: '맥북 프로 M1 Max CTO 버전 사기',
          done: false,
        },
        {
          id: 3,
          title: '오늘의 TIL 작성하기',
          done: false,
        },
      ],
})

컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 사용

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>
  );
}

2. selector

selector 는 atom 의 상태에 의존하는 동적인 데이터를 생성 생성합니다. selector 에서는 get 함수(필수항목)를 통해 atom 정보들을 1개이상 가져올 수 있습니다. 이를 통해 atom을 조합하여 간단히 새로운 데이터를 생성할수 있습니다. 물론 atom 의 정보가 바뀌면 해당 atom 을 의존하는 selector 도 자동으로 리랜더링이 됩니다. 또한 한개 이상의 atom정보를 업데이트 하도록 set 함수(선택항목)를 받을 수 있습니다.

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

    return text.length;
  },
});

// component 작성
// useRecoilValue() 훅을 사용해서 charCountState 값을 읽을 수 있다.
function CharacterCount() {
  const count = useRecoilValue(charCountState);

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

export default SelectorCount;

참고자료
https://recoiljs.org/ko/
https://github.com/boostcampwm-2021/WEB08-AgileStorming/wiki/Recoil%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0
https://blog.woolta.com/categories/1/posts/209