Recoil Selector

Recoil Selector 란?

Recoil 에서의 함수 또는 파생된 상태.

파생된 상태란 atom의 상태에서 파생된 데이터, 즉 atom의 상태에 의존하는 동적인 데이터다.

Selector는 주어진 atom의 상태에 대해 항상 동일한 값을 반환하는 순수함수이다.

만약 Selector에 get함수만 제공된다면 Selector 함수는 읽기만 가능한 RecoilValueReadOnly 객체를 반환하고 set 함수가 함께 제공되면 Selector는 읽기, 쓰기가 가능한 RecoilState 객체를 반환한다.

Selector() 옵션

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})

• key : 내부적으로 atom을 식별하는데 사용되는 문자열
• get : 파생된 상태의 값을 평가하는 함수. 매개변수로 get 함수가 올 수 있는데 다른 atom이나 selector를 찾는데에 사용되는 함수이다.
  Promise나 다른 atom,slelector를 반환할 수 있다.
• set : 이 속성이 설정되면 selector는 쓰기 가능한 상태를 반환한다. 마찬가지로 get 함수가 매개변수로 올 수 있으며 set 함수도 올 수 있다.
• dangerouslyAllowMutability : Selector의 순수함수를 보장하기 위한 옵션

get 옵션

Selector의 get 옵션에 대해 좀 더 알아보자.

앞서 get 옵션에 올 수 있는 함수의 매개변수로 get 함수가 올 수 있다고 했다.
get 함수는 다른 atom이나 selector를 찾는데 사용되는 함수이다.
get 함수는 selector 내에서 다음과 같이 쓰일 수 있다.

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => get(myAtom) * 100,
});

get 함수에 전달되는 atom과 selector는 암시적으로 selector에 대한 의존성 목록에 추가되며 Selector의 의존성이 변경되면 Selector도 재평가 된다.

이 문구를 위 코드를 보며 이해하자.
위 코드에서 myAtom은 mySelector에 대한 의존성 목록에 추가되고 myAtom의 값이 변경되면 mySelector 함수는 재평가 된다.

즉, 변경된 myAtom 값에 맞춰 mySelector함수가 업데이트 된다고 할 수 있다.

Recoil은 Selector를 평가할 때 Selector가 현재 업데이트 되어진 의존성 집합 (atom 이나 Selector) 만 구독하도록 데이터 flow 그래프를 자동으로 업데이트 한다.

또한 Selector를 평가할 때 실제로 사용되는 atom이나 selector 를 기반으로 의존성이 동적으로 결정되는데 아래 코드를 보자.

const toggleState = atom({key: 'Toggle', default: false});

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => {
    const toggle = get(toggleState);
    if (toggle) {
      return get(selectorA);
    } else {
      return get(selectorB);
    }
  },
});

위 코드에서 selectorA와 selectorB는 toggleState에 의존하고 있다.
Recoil은 실제 사용되는 toggleState를 기반으로 의존성을 동적으로 결정시키고 selectorA와 selectorB 또한 의존성 집합에 추가시킨다.

따라서 selectorA와 selectorB 상태가 변화하더라도 mySelector는 재평가 된다.

set 옵션

set 옵션은 기본적으로 atom을 감싼 형태이다.

const proxySelector = selector({
  key: 'ProxySelector',
  get: ({get}) => ({...get(myAtom), extraField: 'hi'}),
  set: ({set}, newValue) => set(myAtom, newValue),
});

비동기 Selector

Selector는 비동기 평가 함수를 가지고 있어 Promise를 출력값으로 반환 가능하다. 즉, 데이터의 비동기 처리가 별도의 라이브러리 없이 Recoil 내부에서 Selector를 이용해 가능하다는 뜻이다.

따라서 atom 에서는 안되는 비동기 처리를 Selector에서는 가능하다 .

다음 글에서 더 자세히 알아보자 .