$$config title: [ReactJS] UnitConverter 예제 (시/분 단위변환기) keywords: - ReactJS - UnitConverter - ... $$ # 시/분 에 대한 state변수 - 시/분 value를 한번에 합치기 위한 state변수 amount ```js const [amount, setAmount] = React.useState(0); ``` - 시-> 분 / 분 -> 시 를 구분하기 위한 state 변수 inverted ```js const [inverted, setInverted] = React.useState(false); ``` # 시/분 에 대한 함수들 - 시/분 모두 input에 입력했을 때 변하는 onChange 함수 : 입력할 때마다 onChange함수 실행됨. ```js const onChange = (event) => { setAmount(event.target.value); }; ``` - 시/분 의 단위변환을 inverted했을 때 각 input 안의 값을 비워주는 reset 함수 : invert 버튼을 눌렀을 때 각 input 안의 값을 비워야 단위 변환할 때 보기 좋음. ```js const reset = () => setAmount(0); ``` - 시 -> 분 / 분 -> 시 로의 단위변환하는 방식을 바꿔주기 위한 invert버튼에 대한 동작 함수 onInvert : invert버튼을 눌렀을 때 실행되는 함수 (invert버튼을 눌렀을 때 inverted state 변수를 true는 false로 false는 true로 바꾸기) ```js const onInvert = () => { //flip후 값이 여전히 존재하는 것을 대비하여 없애주기 reset(); setInverted((current)=>!current) }; ``` # 실제 HTML 구현 (return문) ? - 분(minutes)를 value로 가지는 input 태그 : 안에 주석 참고 ```js

Minutes 분 공식 적용, 아니면 현재값 적용 value={inverted? amount*60 : amount} id="minutes" placeholder="Minutes" type="number" onChange={onChange} //일반적인 javascript의 조건문 변수 === 조건식 //disabled={inverted === true} //짧게 주는 방식 disabled={inverted} />

``` - 시(hours)를 value로 가지는 input 태그 : 안에 주석 참고 ```js

Hours 시 공식 적용 value={inverted ? amount : Math.round(amount/60)} id="hours" placeholder="Hours" type="number" //일반적인 javascript의 조건문 변수 === 조건식 //disabled={inverted === false} //짧게 주는 방식 disabled={!inverted} onChange={onChange} />

``` - Reset 버튼 태그 ```js ``` - Invert 버튼 태그 : (삼항 연산자) onInverted 가 true면 button의 글씨가 "Turn back" , false면 "Invert"로 표시 ```js ``` # Rendering 코드 ```js const root = document.getElementById("root"); ReactDOM.render(, root); ```