Recoil

전역 상태관리 라이브러리 중 하나

• atom(공유 상태)에서 selectors(순수함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만ㄷ르 수있음
• Atoms는 컴포넌트가 구독할 수 있는 상태의 단위
• Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환

Atom

• Recoil의 상태 단위
• 스토어에 저장되고 개신되는 데이터는 모두 Atom을 기반으로 함
• 아톰이 갱신 될 때 그 상태를 구독하고 있는 컴포넌트는 새로운 값을 리렌더 됨

🔥 atom() 함수에 default을 전달해서 작성

import { atom } from 'recoil';

const counterState = atom({
  key: 'counterState',
  default: 0
});

• key : 고유한 key 값
• default : atom의 초기값을 정의

Selectors

• Selector는 상태를 기반으로 전달된 데이터를 가공할 때 사용

🔥 selector() 함수에 key 와 get 와 set 를 전달하여 작성 🔥 값을 자체적으로 캐싱한다. 입력된 적 있는 값을 기억하고 재호출되면 캐싱된 결과를 바로 보여준다.

import { selector } from 'recoil';
...

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

• get은 selector 순수함수, 사용할 값을 반환
• set을 설정하게 되면 쓰기 가능한 모드로 변경
  • 본인 스스로 수정할 수 없음
• 전달된 get인수를 사용해서 아톰이나 다른 셀렉터에 접근할 수 있으며, 접근한 아톰이나 셀렉터가 업데이트 되면 다시 계산
• 셀렉터는 쓸 수(write)없기 때문에 useRecoilState를 사용하지 않고 useRecoilValue를 사용

import { useRecoilState, useRecoilValue } from 'recoil';

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

전역상태 관련 Hooks

• useRecoilState() : useState()와 유사
• useRecoilValue() : 전역상태의 state 상태값만을 참조
• useSetRecoilState() : 전역상태의 setter 함수만을 활용
• useResetRecoilState() : default(초기값)으로 Reset 하기 위해 사용

Loadable 객체

• state : hasValue, hasError, loading 3가지 상태
• contents : atom이나 contents의 상태값

  • hasValue → value

  • hasError → Error

  • loading → Promise

    Promise

atomFamily(),selectorFamily()

• Famiy메서드들은 atom or selector을 리턴하는 팩토리 함수
• 인자(params)를 받아, 동적인 상태값을 반환
• 외부인자를 활용한 상태값을 관리하기 유리

레퍼런스

새로운 상태 관리 라이브러리 Recoil