React study/React JS로 영화 웹 서비스 만들기
[React] 3-6. Input과 State를 이용하여 단위 변환 앱 만들어보기 (2)
카누가 좋아요
2023. 5. 31. 00:18
📌 단위 변환 앱 만들어 보기
전 시간에 이어서!
4. 사용자가 Minutes 입력란에 값을 입력할 때 Hours 입력란에 입력되는 값도 같이 바뀌게 하기
다음과 같이 코드를 입력하면 된다.
function App() {
// 1
const [minutes, setMinutes] = React.useState(0);
// 2
const onChange = (event) => {
setMinutes(event.target.value);
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes} {/* 3 */}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} {/* 4 */}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
// 5
<input value={minutes} id="hours" placeholder="Hours" type="number" />
</div>
</div>
);
}1. minutes가 곧 state에 해당하였고, 기본값은 0으로 설정하였다. setMinutes는 minutes를 제어하는 함수이다.
2. Minutes 입력란에 변화가 생길 때마다(무언가가 입력되거나 지워짐) onChange() 함수가 실행된다. event는 아래에 보면 change 이벤트라는 것을 알 수 있고, change 이벤트가 일어날 때마다 그 이벤트 객체의 event.target.value를 setMinutes 함수의 인자로 전달하면 setMinutes 함수가 minutes를 해당 값으로 업데이트시킨다.
3. input 속성 중 value는 minutes로 설정하여 Mintues 입력란 안의 변화가 그대로 input의 value가 될 수 있도록 설정하였다.
4. Minutes 입력란의 값에 변화가 일어날 때마다 (change 이벤트가 일어날 때마다) onChange 함수가 실행되도록 하였다.
5. Hours에 해당하는 input의 value 속성으로도 minutes를 지정해 주어 Minutes 입력란에 입력되는 숫자가 그대로 Hours 입력란에도 입력되게 하였다. Hours에 해당하는 input의 속성으로 onChange event를 지정해 주지 않았으므로 Hours 입력란에 값을 직접 입력하는 것이 불가하다.
5. 분 --> 시간 변환 공식을 Hours에 해당하는 input의 value 속성 값에 적용하기
.....
<div>
<label htmlFor="hours">Hours</label>
// 5
<input value={Math.round(minutes/60)} id="hours" placeholder="Hourstype="number" />
</div>
.....* Math.round로 반올림을 적용해 주었다.
이제 Minutes 입력란에 값을 입력할 때마다 그 분값을 60으로 나누어 반올림한 시간 값이 Hours 입력란에 자동으로 나타나게 된다.
6. 초기화 버튼 만들어주기
function App() {
.....
const reset = () => {
setMinutes(0);
};
return (
.....
<button onClick={reset}>reset</button>
.....
}