[React] 시간, 분 변환

//App.tsx

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { hourSelector, minuteState } from './atoms';
// useRecoilState는 atom의 값에 더해서 atom을 수정할 함수를 전달

function App() {
  const [minutes, setMinutes] = useRecoilState(minuteState);
  const [hours, setHours] = useRecoilState(hourSelector);
  const onMinutesChange = (event:React.FormEvent<HTMLInputElement>) => {
    setMinutes(+event.currentTarget.value);
    // +를 앞에 붙이면 string을 number로 바꿔준다.

  };
  const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
    setHours(+event.currentTarget.value);
  }
  return (
    <div>
      <input 
        value={minutes}
        onChange={onMinutesChange}
        // onChange이벤트가 없다면 input에서 수정할 수 없음
        type="number"
        placeholder='Minutes'
      />
      <input
        value={hours}
        onChange={onHoursChange}
        type="number"
        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}) => {
    const minutes = get(minuteState);
    return minutes / 60;
  }, 
  set: ({set}, newValue) => {
    const minutes = Number(newValue) * 60;
    console.log(newValue);
    set(minuteState, minutes);
  },
  // set은 state를 set하게 도와주는 속성
});

 

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
     <RecoilRoot>
      <App />
     </RecoilRoot>
  </React.StrictMode>  
);