📌 단위 변환 앱 만들어 보기
* 코드 초기화
<!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">
const root = document.getElementById("root");
function App() {
return (
<div>
<h1>Super Converter</h1>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
시간을 분 단위로 바꾸기
1. 사용자 입력 input 만들기
- Html 방식
function App() {
return (
<div>
<h1 class="hi">Super Converter</h1>
<label for="minutes">Minutes</label>
<input id="minutes" type="number" />
<label for="hours">Hours</label>
<input id="hours" type="number" />
</div>
);
}
* input tag에 id를 부여하고 label tag에 'for=id명'의 형식으로 for 속성을 작성해 주면 해당 label과 input이 연결된다. (label을 클릭하면 그에 맞는 input이 클릭되는 효과가 나타나게 된다.)
- jsx 방식
jsx는 javascript 문법과 HTML을 혼재하여 쓰기 때문에 위처럼 HTML tag 속성으로 for과 class를 쓰는 것은 좋지 않은 코드이다. for은 javascript 문법에서 선점하고 있기 때문이다.
따라서 아래와 같이 class는 className, for은 htmlFor로 바꾸어 주었다.
function App() {
return (
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
* 개발자 도구 Elements에서는 html 방식으로 적혀 있는 것을 볼 수 있다.
2. minutes에 필요한 state 만들기
- input은 uncontrolled로 알려져 있다. 즉, input의 value는 개발자가 통제하는 것이 불가능하다는 것이다.
function App() {
return (
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input value={minutes} id="minutes" placeholder="Minutes" type="number" />
주목!
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" /> 주목!
</div>
);
}
이제 minutes에 들어갈 값을 앞에서 배운 useState()를 이용하여 정의해 보자.
function App() {
const [minutes, setMinutes] = React.useState();
return (
.....
}
--> minutes는 현재의 분값(input의 현재 value에 해당), setMinutes는 minutes의 값을 수정할 수 있는 modifier 함수를 나타낸다.
3. 사용자가 새로운 값을 입력할 때마다 value업데이트하기
사용자가 input에 새로운 값을 입력할 때마다 state를 업데이트 하면 된다.
이것은 'change' event를 통해서 구현할 수 있다.
const onChange = (event) => { 주목!
console.log(event.target.value);
};
return (
.....
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} 주목!
/>
<label htmlFor="hours">Hours</label>
<input value={hours} id="hours" placeholder="Hours" type="number" />
.....
위와 같이 작성하면 input에 변화가 생기면 onChange 함수를 실행해 줄 것이다.
위 결과 minutes를 입력하는 input에 숫자 하나씩 입력해 줄 때마다 event 객체 자체가 console 창에 나타나게 된다.
나타나는 event 객체의 key와 value를 계속 파고들어 보면, event.target.value의 값이 현재 input에 적혀 있는 값과 같은 것을 볼 수 있다.
따라서 우리가 필요로 하는 값은 event.target.value의 값이다.
이제 input에서 가져온 값을 state의 minutes로 전달해야 하므로 setMinutes() 함수의 인자로 event.target.value를 넣어 준다. (변화를 눈으로 확인하기 위해 You want to convert {minutes} 코드도 넣어 주었다.)
.....
const onChange = (event) => { 주목!
setMinutes(event.target.value);
};
.....
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4>You want to convert {minutes}</h4>
.....
Minutes 란에 값을 적으면 적는대로 지우면 지우는 대로 component를 업데이트하여 화면에 보여주는 것을 볼 수 있다.
댓글