React에서는 거의 onChange만 쓰고 써버릇 하니까 onInput이라는 이벤트를 아예 잊고 있었는데, input 관련해서 기능 구현할 때 onChange로 안 먹혀서 찾아보다가 onInput 이벤트를 보고 혹시나 하고 써봤는데..결론적으로는 내가 뭔가를 잘못했는지 둘 다 안 먹혔다. 나름 onInput은 input에 값이 변할때마다 이벤트가 발생되는 이벤트라서 그 개념을 바탕으로 사용했던 건데 찾아보니 JS에서의 쓰임과는 조금의 차이가 있는 것 같았다.
JS에서는
-
onChange: 요소의 값이 변경되었을 때 발생한다. onInput과의 차이점은 onChange는 내용이 변경된 후 요소가 포커스 아웃 되었을 때 발생한다. 또 다른 차이점은 onChange 이벤트가 select 요소에서도 작동한다는 것이다.
-
onInput: onInput이벤트는 사용자가 입력을 받을 때 발생한다. onChange 이벤트와 매우 유사하지만, 차이점이 있다면 onInput은 요소의 값이 변경되는 즉시 발생한다는 점이다.
React에서는
- onChange나 onInput이 동일하게 input 값이 변경될 때마다(포커스 아웃이 일어나지 않아도) 이벤트가 발생한다.
그래서 react에서는 onChange와 onInput의 차이가 없다. 하지만 보편적으로는 onChage가 많이 사용된다.
참조👇
