아래의 selector 는 속성 계산에 사용되는 함수인 get만 쓰인 형태로, 상태(atom 이나 다른 selector)를 조회할 수 있는 읽기 전용 selector 이다.
당연히 읽기 전용이기 때문에 업데이트 함수를 주는 useRecoilState
와는 사용할 수 없으며 useRecoilValue
로만 상태를 조회해야 한다. (key는 내부적으로 selector를 식별하는데 사용되는 고유한 문자열이다.)
// global.js
const fontSizeLabelState = selector({
key: 'fontSizelabelState',
get: ({get}) => {
const fontSize = get(fontSizeState); // fontSizeState 는 atom (구독)
const unit = 'px';
return '${fontSize}${unit}';
},
});
// App.jsx
function FontButton() {
const [fontSize, setFontSize] = useRecoilState(fontSizeState);
const fontSizeLabel = useRecoilValue(fontSizeLabelState);
const onClick = () => setFontSize(fontSize + 1);
return (
<>
<div>Current font size: {fontSizeLabel}</div>
<button onClick={onClick} style={{fontSize}}>
Click to Enlarge
</button>
</>
);
}
읽기 전용 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);
}
},
});