[React] Recoil의 쓰기 가능한 Selector

쓰기 가능한 Selector

양방향 selector는 입력 값을 매개변수로 받고 데이터 흐름 그래프를 따라 업스트림에서 변경사항을 전파하는 데 사용할 수 있다. 사용자가 selector를 새 값으로 설정하거나 selector를 재설정할 수 있기 때문에 입력 값은 selector가 나타내는 타입과 동일하거나 재설정 작업을 나타내는 DefaultValue 객체 중 하나이다.

import {atom, selector, useRecoilState, DefaultValue } from 'recoil';

const tempFahrenheit = atom({
	key: 'tempFahrenheit',
  	default: 32,
});

const tempCelcius = selector({
	key: 'tempCelcius',
  	get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  	set: ({set}, newValue) => 
  		set(
        	tempFahrenheit,
          	newValue instanceof DefalutValue ? newValue : (newValue * 9) / 5 + 32, 
        )
});

function TempCelcius() {
	const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  	const [tempC, setTempC] = useRecoilState(tempCelcius);
  	const resetTemp = useResetRecoilState(tempCelcius);
  
  	const addTenCelcius = () => setTempC(tempC + 10);
  	const addTenFahrenheit = () => setTempF(tempF + 10);
  	const reset = () => resetTemp();
  
  	return (
    	<div>
        	Temp (Celcius): {tempC}
          	<br />
          	Temp (Fahrenheit): {tempF}
          	<br />
          	<button onClick={addTenCelcius}>Add 10 Celcius</button>
          	<br />
          	<button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
          	<br />
          	<button onClick={reset}>Reset</button>
        </div>
    )
}