[React.js] Unit Converter (단위 변환) 앱 만들기

Frontend/React.js

[React.js] Unit Converter (단위 변환) 앱 만들기

th42500 2022. 4. 29. 23:08

해당 내용은 노마드코더의 ReactJS로 영화 웹 서비스 만들기라는 강의를 듣고 작성한 내용임을 미리 알려드립니다.

자세한 내용은 노마드코더 홈페이지의 강의를 참고해주세요.

https://nomadcoders.co/react-for-beginners/lobby

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

Unit Converter (단위 변환) 앱 만들기

JSX와 HTML의 문법의 차이

JSX는 HTML과 문법이 비슷하다.

그러나 다음 코드의 결과를 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<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/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">
		const root = document.getElementById("root");

		function App() {
			return (
				<div>
					<h1>Super Converter</h1>
					<label for="mitunes">Minutes</label>
					<input id="minutes" type="number" placeholder="Minutes" />
					<label for="hours">Hours</label>
					<input id="hours" type="number" placeholder="Hours" />
				</div>
			);
		}
		ReactDOM.render(<App />, root);
	</script>
</html>

에러의 내용은 다음과 같다.

유효하지 않은 DOM 속성 ' for'. 'htmlFor'을 의미하나요?

이로써 JSX 문법에서는 HTML의 for을 사용할 수 없으며, JSX와 HTML 문법은 다르다는 것을 알 수 있다.

❓ HTML과 JSX 문법 차이

HTML	JSX
for	htmlFor
class	className
if문 사용 가능	if문 사용 불가능 (조건부 연산자 사용)

⏰ Time Unit Converter (시간 단위 변환) App 만들기

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<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/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">
		const root = document.getElementById("root");

		function App() {
			const [minutes, setMinutes] = React.useState(0);
			const onChange = (event) => {
				console.log("somebody wrote");
				console.log(event.target.value);
				setMinutes(event.target.value);
			}
			const reset = () => setMinutes(0);

			return (
				<div>
					<h1>Super Converter</h1>
					<div>
						<label for="mitunes">Minutes</label>
						<input value = {minutes} id="minutes" type="number" placeholder="Minutes" onChange = {onChange}/>
						<h4>You want to convert {minutes}</h4>
					</div>
					<div>
						<label for="hours">Hours</label>
						<input  value = {Math.round(minutes / 60)} id="hours" type="number" placeholder="Hours" />
					</div>
					<button onClick = {reset}>Reset</button>
				</div>
			);
		}
		ReactDOM.render(<App />, root);
	</script>
</html>

1️⃣ State 만들기

const [minutes, setMinutes] = React.useState(0);

2️⃣ <input> 태그의 value를 state와 연결

<div>
    <label for="mitunes">Minutes</label>
    <input value = {minutes} id="minutes" type="number" placeholder="Minutes"/>
    <h4>You want to convert {minutes}</h4>
</div>

3️⃣ onChange 함수 만들기

const onChange = (event) => {
    console.log("somebody wrote");
    console.log(event.target.value);
    setMinutes(event.target.value);
}

<div>
    <label for="mitunes">Minutes</label>
    <input value = {minutes} id="minutes" type="number" placeholder="Minutes" onChange = {onChange}/>
    <h4>You want to convert {minutes}</h4>
</div>

✔ <input>에서 리스닝하는 데이터를 업데이트 해주는 역할

4️⃣ 같은 방법으로 "시" <input>을 작성하되, onChange 함수는 지우기

<div>
    <label for="hours">Hours</label>
    <input  value = {Math.round(minutes / 60)} id="hours" type="number" placeholder="Hours" />
</div>

✔ value 값은 1시간 = 60분이므로 minutes / 60으로 정하되, Math.round()를 이용하여 소수 첫째자리에서 반올림하여 나타냄

✔ onChange() 함수를 지웠기 때문에 hours <input>에서는 데이터 변경 불가능

5️⃣ Reset 버튼 & reset() 함수 생성

const reset = () => setMinutes(0);

<button onClick = {reset}>Reset</button>

✔ setMinutes()함수 내의 데이터 값을 0으로 초기화하면서 reset시킴