<html lang="ko">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.querySelector("#root");
function App() {
const [amount, setAmount] = React.useState("");
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0)
const onFlip = () => {
reset();
setFlipped((current) => !current);
};
return (
<div>
<h1>converter</h1>
<div>
<label htmlfor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>
</div>
<div>
<label htmlfor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
flip
const onFlip = () => setFlipped(!flipped);
-> flipped가 true라면 부정명제인 !flipped는 false
-> false라면 true
state값으로 input을 enabled할지 disabled 할지를 결정할 수 있음
디폴트 값이 false 라고 정했으므로 Hours는 disabled 되어야함
그래서 disabled={flipped === false}를 써줘서
flipped가 false라면, disabled는 true가 되도록 만들어줌
Minuets에는 반대로
disabled={flipped === true}라고 써줌
그러나
Hours는
disabled={!flipped}
Minuets에는 반대로
disabled={flipped}
주는게 더 짧고 좋음
시간 -> 분 컨버터
삼항연산자(ternary operator) 사용하기
flipped ? amount : amount / 60
-> 만약 flipped 상태면 state에 있는 값을 그대로 보여주기
아니라면 60으로 나눈 변환된 값 보여주기
value={flipped ? amount * 60 : amount}
-> 만약 flipped 상태면 60으로 곱한 변환된 값 보여주기
아니라면 state에 있는 값을 그대로 보여주기
flip누르면 변화된 값 그대로 가져오므로
onFlip 변수에 reset(); 넣어주기