JSX는 Javascript 기반으로 만들어졌기 때문에 class, for 등은 html의 의미로 사용되지 않기 때문에
class -> className
for -> htmlFor
로 변경하여 사용한다.
<h1 class="hi">Super Converter</h1>
=> <h1 className="hi">Super Converter</h1> <label for="minutes">Minutes</label>
=> <label htmlFor="minutes">Minutes</label>Input & State Practice1
분을 시간으로 계산하는 간단 웹으로 input과 state연습!
onChange : input의 값이 바뀔 때 발생하는 함수
현재 input의 값을 가져오기 위해 onChange속성에 대입한 함수에 콘솔로 event를 출력
...
const onChange = (event) => {
console.log(event);
};
<input ... onChange={onChange} />input의 현재 값을 가지고 있는 것은 event.target.value 라는 것을 확인
( event.target: 현재 작성중인 input)
input에 입력된 값을 변수 minutes에 바로 업데이트 해주기 위해 setMinutes 함수에 값을 넘겨준다.
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value)
};
<input ... onChange={onChange} />분을 입력하는 input의 값을 시간으로 변환하는 input 속성의 value값으로 설정하면 분에 입력된 값이 해당 input에 입력된다.
<input
value={minutes}
id="hours"
placeholder="Hours"
type="number"
/>minutes의 input value를 60으로 나누면 시간으로 변환한 값이므로
hours의 value에 minutes/60 을 대입한 전체 코드는 다음과 같다.
(반올림을 위해 Math.round(minutes / 60) 대입)
const root = document.getElementById("root");
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value)
};
const reset = () => setMinutes(0)
return(
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes / 60)}
id="hours"
placeholder="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
ReactDOM.render(<App />, root);