<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [amount, setAmount] = React.useState(0);
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> Super 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}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>냅다 코드블럭이 있으니 당황했겠지?
내가 봐도 그렇다 ㅎ
일단 앞의 useState의 글과 이어진다.
분과 시간 이 둘이 교차되면서 값이 나오길 원했고 위에 코드결과가 교차되면서 나오는 결과이다.
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const onFlip = () => {
reset();
setFlipped((current) => !current);
};먼저 위에부터 설명하자면 우리는 버튼을 하나 더 만들었는데 그 버튼은 flip버튼이다. 누르면 분과 시간 중에 원하는 곳에서 입력할 수 있도록 flip을 만들었는데, useState가 한개가 더 필요해서 첫줄 처럼 만들어주었다.
그 후에 setFlipped의 초깃값이 true면 false가 되도록 false면 true가 되도록 만들어 주었습니다.
(기본값이 true라서 false로 변경하는 것으로 함)
<input
value={flipped ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={flipped}
/>만약에 flipped라면 false인 값이니까 시간값이 나오니까 삼항연산자를 통해서 amount * 60을 해서 값을 표시하고 아니면 amount 기본값으로 나오도록 설정합니다.
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={!flipped}
onChange={onChange}
/>
</div>시간은 반대로 flippend 라면 amount 기본값을 출력하고 아니라면 true값이기 때문에 나누기 60으로 해야한다.
그리고 disabled = !filipped 를 설정해줘서 flipped 값이면 닫힌 회색창이 열리도록 설정해 두었다.
마지막으로 위와 마찬가질로 onChange를 넣어주면서 입력 값을 받을 수 있도록 설정해 주고
<button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>버튼에 onClick효과 onFlip을 두고 flipped인 경우와 아닐 경우에 이름이 바뀌도록 설정해 두었다.
'React > 개념' 카테고리의 다른 글
| To Do List (react기초) (2) | 2022.10.06 |
|---|---|
| Cleanup function (0) | 2022.10.06 |
| use State, onChange (2) | 2022.10.04 |
| input 상태 관리하기 (0) | 2022.10.03 |
| useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 (0) | 2022.10.03 |