onChange와 onInput 속성은 JS에서는 기능이 다르지만, React는 동일하다.
JS ? -> onChange와 onInput이 다른 기능을 함
React ? -> onChange와 onInput이 같은 기능을 함
JS에서의 onChange와 onInput의 차이점
onChange:
onChange 이벤트는 입력 요소의 값이 변경되었을 때 발생합니다.
대부분의 경우, 사용자가 입력을 완료하고 해당 입력 필드를 떠날 때 이벤트가 발생합니다. 예를 들어, 텍스트 입력 필드에서 텍스트를 입력하고 포커스를 잃을 때(blur 이벤트가 발생할 때) onChange 이벤트가 발생합니다.
보통 텍스트 입력 필드나 선택 요소(셀렉트박스, 라디오 버튼, 체크박스 등)에서 사용됩니다.
onInput:
onInput 이벤트는 입력 요소에 사용자 입력이 발생할 때 매번 발생합니다.
사용자가 키보드로 입력할 때마다 이벤트가 발생하므로, 실시간으로 입력을 감지할 때 유용합니다.
따라서 입력이 발생할 때마다 즉각적인 처리가 필요한 경우에 사용됩니다.
요약하면,
onChange는 값이 변경될 때 발생하고, 보통 입력이 완료된 후에 발생하며,
onInput은 사용자가 입력을 할 때마다 발생하고, 실시간으로 입력을 처리할 때 유용하다.
그러나 React에서는 동일하다.