• onChage: 폼의 입력 요소에 변경이 생기면 발생한다.
• onInput: textarea, input 요소의 값이 변경될 때 발생한다. React 팀은 이 이벤트의 사용을 추천하지 않는다.
• onSubmit: 폼 제출 시 발생한다. 흔히 Enter를 눌렀을 때 발생한다.
Note onChange와 onInput의 비교
React의 onChange는 모든 변경에 대해 발생하므로 DOM의 change 이벤트가 매번 발생하지 않고 포커스를 잃었을 때만 발생하는 것과는 차이가 있다. 예를 들어 input type=”text”의 경우 사용자가 입력할 때 onChange 이벤트가 발생하지 않을 수도 있고, 사용자가 탭이나 클릭으로 포커스를 잃을 때 일반적인 HTML 브라우저 이벤트로 onChange 이벤트가 발생한다. 앞에서 언급한 것처럼 React의 경우에는 onChange 이벤트가 포커스를 잃을 때뿐만 아니라 키 입력 시마다 발생한다. 반면에 React의 onInput 이벤트는 DOM의 onInput 이벤트를 감싼 것으로, 변경할 때마다 발생한다.
결론은 React의 onChange와 HTML의 onChange는 서로 다르게 동작한다는 것이다. React의 onChange 이벤트는 HTML의 onInput 이벤트와 더 비슷하고 일관성이 있다. React에서는 가급적 onChange 이벤트를 활용하고, onInput 이벤트의 네이티브 구현에 접근해야 하는 경우에만 onInput을 사용하는 것을 추천한다. React가 감싸서 만든 onChange의 동작이 일관성 있어 믿을 수 있기 때문이다.
앞에서 정리한 세 가지 이벤트에 덧붙여서 form에 onKeyUp이나 onClick 같은 표준 React 이벤트도 사용할 수 있다. 폼 이벤트를 사용하면 input 요소 그룹 같은 전체 폼에서 특정 이벤트를 감지해야 하는 경우에 편리하다.
