onChange

onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.

예를 들어

const [minutes, setMinutes] = React.useState();
const onChange = (event) => setMinutes(event.target.value);

<input
      value={minutes}
      id="minutes"
      placeholder="Minutes"
      type="number"
      onChange={onChange}
 /> //인풋창에 글을 쓰면 value값이 바뀐다

그래서 보통 만약 input type을 text or number 형식으로 만들면 글을 쓸 때마다, 아니면 숫자를 클릭하여 올릴 때마다 값을 바뀌는 것을 줘야하는데, 그렇기 때문에 onChange 함수에 event로 받아서 누를 때마다 변하는 event.target.value로 접근해 주는 것이다.

단추 버튼같은 것에도 onChange 를 쓴다

label tag

보통 input 옆에 놓는데,

<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />

이런 식으로 id로 연결한다.

html에서는 그냥 for로 연결하지만, html 문법이기 때문에 react에서는 htmlFor로 이어줘야 한다.