[TIL] Today I Learned #5 (2022.05.09)

Recoil !!! 넌 대체 누구야! (1편)

관련 문서 : https://recoiljs.org/ko/

React를 위한 상태관리 라이브러리

• 페이스북에서 만든 오픈소스 라이브러리.

• Recoil을 사용하면 atom (공유상태)에서 selectors (순수 함수)를 거쳐, React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.

• Redux가 있잖아? -> 다른 기론의 상태 관리 라이브러리는 강력하지만, React 라이브러리가 아니다. store는 외부요인으로 취급되어 React의 내부 스케쥴러에 접근할 수 없다.

• Recoil은 API가 비교적 단순하고 비동기 데이터 흐름을 위한 내장 솔루션까지 제공한다.

Atoms :

• 컴포넌트가 구독할 수 있는 상태의 단위.
• 업데이트와 구독이 가능하다.
• atom의 값을 변경하면 구독하고 있는 컴포넌트들이 모두 다시 렌더링된다. 키 값은 전역적으로 고유해야 하며, 기본값을 가진다.

// atom을 생성해주는 atom 함수

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

// atom을 읽고 쓸 수 있게 해주는 useRecoilState 훅
// useState와 비슷하지만, 상태가 컴포넌트 간에 공유될 수 있다는 차이점!

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

Selectors :

• atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다.

다음편에 계속 -