<!DOCTYPE html>
<html>
<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) => {
setMinutes(event.target.value);
};
return(
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input value={minutes} id="minutes" placeholder="Minutes" type="number"
onChange={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>-
임폴트 development로 바뀜
-
input에 있는 value값이 정해지지 않았다면 state에 있는 초기값으로 들어갈 수 있음
-
사용자가 input에 값을 넣었을때 change 이벤트가 발생 -> onChange 함수가 실행
-
onChange함수 안에있는 event 안에있는 요소를 따라 들어가면 event.target.value 안에 우리가 원하는 값이 업데이트됨
-
event.target.value(input value값)최신화 되는 값을 창에 불러와 입력한값대로 업데이트가능
input의 value를 연결시켜주는 이유는, input값을 외부에서도 수정해주기 위해서
onChange는 업데이트를 시켜주고 UI에 보여준다.
파이팅