<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [amount, setAmount] = React.useState();
// default 값은 0이다.
const [flipped, setFlipped] = React.useState(false);
//flip이 true상태라면 false를 반환한다. false 상태라면 true 를 반환한다.
const onChange = (event) => {
//console창에서 target value 값이 가장 먼저 보이게 함이다.
setAmount(event.target.value);
//state 데이터가 업데이트된다.
};
const reset = () => setAmount(0);
//Amounts값을 0으로 되돌려줍니다 ~
const onFlip = () => {
reset();
setFlipped((current) => !current);
// 현재 상태를 바탕으로 새로운 state를 계산해내기.
};
return (
<div>
<h1 className="hi"> Super Converter</h1>
<label htmlFor="amount">Amount</label>
<div>
<input
value={flipped ? amount * 60 : amount}
//사용자가 다른 값을 입력할 때 마다 이 value를 업데이트 하고 싶어 !! 우리가 찾는 이벤트는 change이다.
id="amount"
placeholder="amount"
type="number"
onChange={onChange}
disable={flipped === true} // flipped가 false라면 면 amount는 disable 해주고 반대로 hours는 enable로 작동
//이런식으로 prop을 전달한다. true냐 false냐로 평가하는 일반적인 JS코드이다.
//이 함수는 데이터를 업데이트 하는 역할을 한다.
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
//이때 amount을 바꾸면 hours도 함께 바뀌게 된다.
<input
value={flipped ? amount : Math.round(amount / 60)}
///Math.round는 반올림하는 함수이다.
// hour에 값을 작성할 때만 나누기60으로 나타내기 위해 인라인if문을 사용할 것이다 !!!
//flipped ? amount : Math.round(amount / 60)
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disable={flipped === false}
//flipped state 값으로 input을 enabled 할지 disabled 할지 결정할 수 있다.
//즉 flipped가 false이면 hours는 disabled 된다.
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
//jsx는 html과 비슷하지만 clss 나 for을 쓸 수 없다. htmlFor로 써줘야 한다
</html>
flip을 활용해서 값을 true 냐 false냐에 따라 input을 disable 할지 enable 할지 정한다.
그리고 입력한 부분이 hour 냐 minute냐에 따라서 *60 할지 /60할지 정한다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다