7.1.3 변경 감지하기

앞서 언급한 것처럼 폼 요소의 변경을 감지할 때는 onChange 이벤트 리스너를 이용한다. onChange 이벤트는 일반적인 DOM의 onInput 이벤트를 대체한다. 일반적인 HTML DOM의 onInput과 같은 동작이 필요한 경우에는 React의 onInput 이벤트를 사용할 수 있다. 반면에 React의 onChange 이벤트는 일반적인 DOM의 onChange 이벤트와 완벽하게 동일하지 않다. 일반적인 DOM의 onChange 이벤트는 요소가 포커스를 잃었을 때만 발생하지만, React의 onChange 이벤트는 모든 새로운 입력에 대해 발생한다. onChange 이벤트를 발생시키는 요인은 요소에 따라 차이가 있다.

• <input>, <textarea>, <select>: value가 변경될 때 onChange 이벤트가 발생한다.

• <input> 체크박스와 라디오 버튼: checked가 변경될 때 onChange 이벤트가 발생한다.

 

이 분류에 따라 value를 읽는 방법이 다르다. 이벤트 핸들러의 인자로는 합성 이벤트(SyntheticEvent)를 받는다. 요소에 따라 event.target은 value, checked, selected 같은 값을 갖는다.