(18) React - selector modify

* selector를 이용해 minutes <=> hours 변환기 만들기

// App.tsx
import { useRecoilState } from "recoil";
import { minuteState, hourSelector } from "./atoms";

function App() {
  // useRecoilState는 atom의 값에 더해서
  // atom을 수정할 함수까지 준다
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const [hours,setHours] = useRecoilState(hourSelector);
  // atom이나 selector로 useRecoilState를 쓸때 결과
  // array의 첫번째 item은 atom의 값이거나 selector의 get함수의값
  const onMinutesChange = (event:React.FormEvent<HTMLInputElement>) => 
  {setMinutes(+event.currentTarget.value)};
  // 앞에 '+'를 붙이면 string=>number로 바꿀 수 있다.
  // minutes는 number이기 때문에 바꾸는것 
  const onHoursChange = (event:React.FormEvent<HTMLInputElement>) => 
  {setHours(+event.currentTarget.value)};
  return (
   <div>
    <input type="number" 
    value={minutes} 
    onChange={onMinutesChange} 
    placeholder="Minutes"/>

    <input value={hours} 
    type="number"
    onChange={onHoursChange} 
    placeholder="Hours"/>
   </div>
  );
}

export default App;

// atoms.tsx

import { atom, selector } from "recoil";

export const minuteState = atom({
    key: "minutes",
    default:0,
});

export const hourSelector = selector<number>({
    key: "hours",
    get: ({get}) => {
        // 같은 파일에 있는 atom을 이용할것이기 때문에 get을 통해 접근
        const minutes = get(minuteState);
        return minutes/60;
    },
    set: ({set},newValue) =>{
        const minutes = Number(newValue)*60;
        set(minuteState,minutes);
    },
});