recap 하시오
<!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();
// default 값은 0이다.
const onChange = (event) => {
console.log(event.target.value); //console창에서 target이 가장 먼저 보이게 함이다.
setMinutes(event.target.value);
//state 데이터가 업데이트된다.
};
const reset = () => setMinutes(0);
//minutes값을 0으로 되돌려줍니다 ~
return (
<div>
<h1 className="hi"> Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<div>
<input
value={minutes}
//사용자가 다른 값을 입력할 때 마다 이 value를 업데이트 하고 싶어 !! 우리가 찾는 이벤트는 change이다.
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
//이 함수는 데이터를 업데이트 하는 역할을 한다.
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
//이때 minutes을 바꾸면 hours도 함께 바뀌게 된다.
<input
value={Math.round(minutes / 60)}
///Math.round는 반올림하는 함수이다.
id="hours"
placeholder="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
//jsx는 html과 비슷하지만 clss 나 for을 쓸 수 없다. htmlFor로 써줘야 한다
//value부분만 render되고 있다. //다음 시간에 hour에 속성을 더할 것이다, flip이라는 버튼을 만들어 hour에 입력 가능하도록 하여 시간을 분으로 나타 낼 것이다.
최강 프론트엔드 개발자가 되고싶은 안유진 입니다