📌 개요

Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph 제작 가능.

• Atoms

  컴포넌트가 구독할 수 있는 상태의 단위

• Selectors

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

📌 Atoms

상태의 단위이며, 업데이트 & 구독 가능
/

• 업데이트되면

  각각의 구독된 컴포넌트는 새 값을 반영하여 다시 렌더링
  

• 런타임에서 생성 가능

• React의 로컬 컴포넌트의 상태 대신 사용 가능

  동일 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유함.
  

• 생성 방법

  atom함수 사용

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

• 전역적으로 고유한 키 필요

  디버깅, 지속성 및 모든 atoms의 map을 볼 수 있는 특정 고급 API에 사용되는 고유한 키가 필요

• 기본값 보유 (React 컴포넌트의 상태처럼)

• 읽고 쓰는 법

  useRecoilState훅 사용
  

• React의 useState와 차이

  (비슷하지만) 상태가 컴포넌트 간에 공유 가능
  

📌 Selectors

atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)

• 상위의 atoms 또는 selectors가 업데이트되면

  → 하위의 selector 함수도 다시 실행
  

• 컴포넌트들은 selectors를 atoms처럼 구독 가능

  selectors 변경 시, 컴포넌트들도 다시 렌더링
  

• 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용

  • 최소한의 상태 집합만 atoms에 저장

  • 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산 → 쓸모없는 상태의 보존을 방지

• 어떤 컴포넌트가 자신을 필요로하는지, 또 자신은 어떤 상태에 의존하는지를 추적함으로써 이러한 함수적인 접근방식을 매우 효율적 만듦.

• 컴포넌트의 관점에서

  selectors와 atoms는 동일한 인터페이스를 가지므로 서로 대체 가능

🔹 정의 방법

selector함수 사용

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

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

/*
fontSizeLabelState selector는 
- atom(fontSizeState)에 의존성을 가짐.
- 개념적으로 fontSizeState를 입력으로 사용하고 
형식화된 글꼴 크기 레이블을 출력으로 반환하는 순수 함수처럼 동작 
- writable하지 않기 때문에 useRecoilState()를 이용 안함.*/

▪︎ get 속성

계산될 함수

• 전달되는 get 인자를 통해 atoms와 다른 selectors에 접근 가능

  다른 atoms나 selectors에 접근 시, 자동으로 종속 관계 생성

  → 참조했던 다른 atoms나 selectors가 업데이트되면 이 함수도 다시 실행됨
  

• 읽는 법

  useRecoilValue()

▪︎ useRecoilValue()

하나의 atom이나 selector를 인자로 받아 대응하는 값을 반환

• writable한 selectors에 대한 더 많은 정보 → selector API reference

---

참고

• Recoil 공식 문서 - 주요 개념