2022. 9. 14. 14:50ㆍReact/ReactJS로 영화 웹 서비스 만들기
이번에는
단위변환을 뒤집어보는 함수(flip function)를 만들어보자.
첫번째가 disabled이게, 다음엔은 두번째가 disabled이게
먼저 버튼을 만들어보자.
이 버튼은 flipped가 true면 !flipped는 false가 된다.
근데 state 계산을 이 부분을 바탕으로 하는건 좋지는 않다.
현재 state 값을 넣어주고, 겨로가는 반대로 도출하라고 명령해주는 것이다.
flipped가 false이면, hours는 disabled되도록 해보자.
flipped의 초기값이 false이고,
버튼을 클릭하면 onFlip함수가 가동이 되어 현재값을 반대 값으로 조정해주어
flipped 값이 true->false->true->false로 버튼을 클릭할때마다 달라진다.
이에 따라 flipped 값이 true일 경우에는 minutes값이, false일 경우에는 hours 값이 disabled되도록 코드를 작성하여 보았다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [minutes, setMinutes] = React.useState(0);
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setMinutes(event.target.value);
}
const reset = () => setMinutes(0);
const onFlip = () => setFlipped((current) => !current);
return (
<div>
<h1>Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input value={minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange} disabled={flipped === true} />
</div>
<div>
<label htmlFor="hours">Hours</label>
<input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" disabled={flipped === false} />
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
)
}
ReactDOM.render(<App />, root);
</script>
</html>
이는 prop을 통해 disabled값을 바꾸도록 한번 바꿔 본 것이다.
하지만 이것은 true인지 false인지 평가하는 일반적인 JS 코드이며, 더 간단하게 나타내고 싶다면
다음과 같이 나타내면 된다.
자 그러면 Hours input의 change event를 리스닝해보자.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
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 = () => 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"
onChange={onChange}
disabled={!flipped}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
)
}
ReactDOM.render(<App />, root);
</script>
</html>이렇게 코드를 재 구성하면 minutes -> hours, hours -> minutes 두 변환 모두 잘 작동이 된다.
그런데 flip버튼을 클릭할때 각 값이 이상하게 들고와지는 것을 확인할 수 있다.
그래서 onFlip함수에 reset함수를 더해주자!
그러면 flip버튼을 누르는 순간 모두 0으로 reset되어 정상적으로 작동하는 것을 확인할 수 있다.
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 3.9 Final Practice and Recap (0) | 2022.09.14 |
|---|---|
| 3.8 Recap (0) | 2022.09.14 |
| 3.6 State Practice part One (0) | 2022.09.13 |
| 3.5 Inputs and State (0) | 2022.09.13 |
| 3.4 State Functions (0) | 2022.09.07 |