unit conversion(단위변환)
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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">
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
console.log(event.target.value); //console창에서 target이 가장 먼저 보이게 함이다.
setMinutes(event.target.value);
};
return (
<div>
<h1 className="hi"> Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
//사용자가 다른 값을 입력할 때 마다 이 valye를 업데이트 하고 싶어 !! 우리가 찾는 이벤트는 change이다.
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
//onChange라는 envent를 리스닝 한다. input 에 변화가 생기면 onChange함수를 실행시킬 것이다.
/>
<h4>You want to convert{minutes}</h4>
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
//jsx는 html과 비슷하지만 clss 나 for을 쓸 수 없다. htmlFor로 써줘야 한다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다