쓰기 가능한 Selector

양방향 selector는 입력 값을 매개변수로 받고 데이터 흐름 그래프를 따라 업스트림에서 변경사항을 전파하는 데 사용할 수 있다.

사용자가 selector를 새 값으로 설정하거나 selector를 재설정할 수 있기 때문에 입력 값은 selector가 나타내는 타입과 동일하거나 재설정 작업을 나타내는 defaultValue 객체 중 하나이다.

이 간단한 selector는 기본적으로 atom을 감싸서 필드를 추가한다. 이것은 단지 설정과 재설정 작업을 업스트림 atom까지 통과한다.

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

이 selector는 데이터를 변환하므로 입력 값이 DefaultValue 인지 확인해야 한다.

const transformSelector = selector({
  key: 'TransformSelector',
  get: ({get}) => get(myAtom) * 100,
  set: ({set}, newValue) =>
    set(myAtom, newValue instanceof DefaultValue ? newValue : newValue / 100),
});

set을 통한 selector 에서의 복수개의 atom 수정

*selector에서는 set 이라는 함수를 통해 여러개의 atom 정보를 동시에 수정할 수 있습니다.*

해당 옵션은 필수는 아니고 필요한 경우에만 사용하는 Optional Property 입니다.

사용하는 방법을 익히기 위해 input 에서 숫자를 적으면 동시에 count, input 정보를 9999 로 변경되도록 하는 예시를 작성해 보겠습니다.

1. Recoil Selector에 set 추가

// atoms.ts

export const countInputState = selector({
	key: 'countTitleState',
  get: ({ get }) => {
      return `현재 카운트는 ${get(countState)} 이고 입력값은 ${get(inputState)} 입니다.`;
  },
  set: ({ set }, newValue) => { // 2번째 파라미터에는 추가로 받을 인자를 나타냅니다.
      set(countState, Number(newValue)); // count atom 수정
      set(inputState, newValue + '');    // input atom 수정
  },
});