<!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();
const [inverted, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onInvert = () => {
reset();
setFlipped((current) => !current);
};
return (
<div>
<h1 className="hi"> Super Converter</h1>
<label htmlFor="amount">Amount</label>
<div>
<input
value={inverted ? amount * 60 : amount}
id="amount"
placeholder="amount"
type="number"
onChange={onChange}
disable={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
//true냐 false냐에 따라서 amount값을 변겨해준다.
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disable={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>
{inverted ? "Back again" : "Invert"}
</button>
//button 에 인라인 if 문으로 현재 state에 따라 다른 값으로 설정한다.
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
state를 바탕으로 UI를 변경할 수 있는게 얼마나 유용한 지 알 수 있었다.
값을 바꾸고 싶을 때 마다 setAmount 나 setFlipped를 사용할 때마다 UI가 새로고침 되는 것이다 .
그렇기 때문에 Inverted를 수정할때 마다 "Turn back" 또는 "Invert"가 나타나는 것이다.
그러면 친절한 React는 알아서 새로고침 해준다 !!
최강 프론트엔드 개발자가 되고싶은 안유진 입니다