[recoil] selector
순수함수
입력으로 주어진 인자에만 의존하고 side effect가 없는 함수를 말한다.
side effect : 함수 외부의 상태를 변경하거나 다른 외부 환경에 영향을 미치는 동작
순수함수는 입력과 반환값에만 의존하고, 같은 입력에 대해서 항상 같은 출력을 반환한다.
selector
selector는 atom이나 다른 seletor를 입력으로 받아들이는 순수함수다
상위 atom이나 selector가 업데이트되면 하위 selector 함수도 다시 실행된다
컴포넌트는 selector를 구독할 수 있고 selector가 변경되면 컴포넌트도 리렌더링된다.
selector는 상태를 기반으로 파생시키는 상태(데이터)를 계산하는 데에 사용된다.
최소한의 상태 집합만 atom에 저장하고, 다른 모든 파생 데이터는 selector에 명시한 함수를 통해
계산하면 쓸모없는 상태의 보존을 방지할 수 있다.
selector는 어떤 컴포넌트가 자신을 필요로 하는지, 자신은 어떤 상태에 의존하는지 추적한다
컴포넌트의 관점에서 보면 selector와 atom은 동일한 인터페이스를 가져서 서로 대체할 수 있다.
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,
})
type ValueOrUpdater<T> =
| T
| DefaultValue
| ((prevValue: T) => T | DefaultValue);
type GetRecoilValue = <T>(RecoilValue<T>) => T;
type SetRecoilState = <T>(RecoilState<T>, ValueOrUpdater<T>) => void;
type ResetRecoilState = <T>(RecoilState<T>) => void;const fontSizeState = atom({
key : 'fontSizeState',
default : 14,
});
const fontSizeLabelState = selector({
key: 'fontSizeLabelState',
get: ({get}) => {
const fontSize = get(fontSizeState);
const unit = 'px';
return `${fontSize}${unit}`'
},
});
// 이 예제에서는 selector는 fontSizeState atom에 의존성을 가진다.
// selector는 fontSizeState를 입력으로 사용하고 형식화된 글꼴 크기 문자열을 반환하는 순수함수로 동작한다.get
여기서 get 프로퍼티는 파생된 상태의 값을 평가하는 함수이다.
반환값으로 값을 직접 반환하거나, 비동기 Promise, atom, selector를 반환할 수 있다.
get 프로퍼티의 매개변수로 get 프로퍼티를 포함하는 객체를 전달한다.
get 프로퍼티 인자를 통해서 통해서 다른 atom이나 selector에 접근할 때 사용하는 함수다.
이 함수로 다른 atom이나 selector에 접근하게 되면 자동으로 해당 selector의 의존성 배열에 추가된다.
그래서 selector의 의존성 배열의 요소가 변경되면 selector가 다시 평가된다.
set
이 속성이 설정되면 selector는 쓰기 가능한(writable) 상태를 반환한다.
첫번째 매개변수로 콜백 객체와 새로운 입력이 전달됨
selector 를 재설정할 경우 새로운 입력값은 T 타입의 값이나 defaultValue 타입의 객체일 수 있다.
콜백 객체에는 다음이 포함된다
- get
다른 atom이나 selector에서 값을 찾는데 사용되는 함수다.
이 함수는 atom이나 selector를 구독하진 않는다. - set
upstream Recoil 상태의 값을 설정할 때 사용되는 함수다.
매개변수 : Recoil State, ValueOrUpdater (새로운 값)
dangerouslyAllowMutability
객체를 변경하는 것을 허용하도록 설정하는 옵션
Recoil은 기본적으로 selector나 atom의 결과 값을 변경할 때 객체를 얼리고 변경이 발생하는지 감지하는 등의 보안 체크를 수행한다.
이러면 불변성을 보장하면서 예기치 않은 상태 변경을 방지한다.
근데 가끔 불변성 체크를 해제하고 변경을 허용시키는 것이 유용할 수 있는데, 이때 이 옵션을 이용하면 된다고 한다.
그러나 일반적인 경우에 Recoil이 제공하는 불변성 보장 기능을 활용하는 것이 좋다고 한다.
다음 포스팅 내용
selector 예제
recoil의 비동기 데이터 처리 : https://recoiljs.org/docs/guides/asynchronous-data-queries
출처