[Web] React에서의 onChange vs onInput

개요

onInput과 onChange의 차이를 찾아보다가 html 표준으로 작성됐는지 리액트에서 작성됐는지에 따라 두 이벤트에 차이가 달라질 수 있다는 것을 알게되어, 알아보고자한다.

HTML 표준

우선 html 표준에 따르면 input, change 이벤트는 이벤트 타겟, 이벤트 발생 시점 두 가지 관점에서 차이가 있다.

• 이벤트 타겟
  input, change가 트리거될 수 있는 이벤트 타겟의 종류가 다르다.
  ex) checkbox, radio button, file upload ⇒ only occur
• 이벤트가 발생하는 시점
  onInput: 입력이 변화할 때마다
  onChange: <input> 타입 text, search, url, tel, email, password 인 경우 및 <textarea>이 타겟일 때, 내부 입력값이 변경된 후 요소가 포커스를 잃었을 때

React

react도 당연히 두 이벤트가 예상했던 바와 같이 html 표준처럼 동작할 것이라고 생각할 수 있다.
하지만 react의 change event는 html 환경에서와는 다른 시점에 동작한다.

아래는 공식문서에서 가져온 React에서의 onChange, onInput에 대한 정의이다.

onChange: An Event handler function. Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.

onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.

이에 따르면 onInput와의 차이는 감지할 수 있는 엘리먼트 타입이고, 동작에 있어서는 다를 것 없다.

왜 이러한 설계를 하게됐는지에 대해서 공식적으로 문서를 찾지못했지만, 과거 이에 대한 이슈에 달린 개런의 코멘트를 통해 답을 얻을 수 있다.

2013년? 결정 당시 브라우저마다 onInput의 동작이 달라 일관성이 없었다고 한다. 따라서 onInput 대신 브라우저 무관하게 입력에 변경이 일어날 때마다 이벤트가 트리거되는 동작이 하는 역할이 리액트에서의 onChange이다.

Controlled input의 경우에는 상태가 입력값으로 바로바로 갱신되는 동작이 필요하며, 이를 위해 관용적으로 onChange가 사용되어져왔기 때문에 react에서는 onChange를 사용하는 것이 권장되는 듯하다.

실제로 아래와 같이 react의 이벤트 핸들러의 이벤트 객체의 native event라는 속성에 접근해보면, change event가 아닌 input event 객체를 갖고있는 것을 통해 html 표준과는 다른 의미를 가진다는 것을 알 수 있다.

결론

react의 oninput, onchange는 명확한 차이가 있는 웹 표준과는 다르게, 두 이벤트가 유사하게 동작한다.
실제로 최신 react 공식문서에도 onChange가 onInput과 같이 동작한다고 설명되어있다.