양방향 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),
});
*selector
에서는 set
이라는 함수를 통해 여러개의 atom 정보를 동시에 수정할 수 있습니다.*
해당 옵션은 필수는 아니고 필요한 경우에만 사용하는 Optional Property 입니다.
사용하는 방법을 익히기 위해 input 에서 숫자를 적으면 동시에 count, input 정보를 9999 로 변경되도록 하는 예시를 작성해 보겠습니다.
// 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 수정
},
});