onInput과 onChange는 자주 사용하지만 헷갈릴 때가 종종 있다.
💡onInput
- 데이터를 입력할 때마다 발생한다.
(input에 값이 변경될 때마다 발생함) input,textarea태그에서만 사용 가능하다.
💡onChange
- input태그의 초점(focus)를 잃은 순간에 작동한다
즉, 인풋창에 데이터를 입력하고 다른 곳을 클릭해야 작동한다는 것! - input에 입력된 값이 이전과 다르면 발생한다.
input,textarea,select태그에서만 사용 가능하다.
예시
🧚 input text가 두 글자 이상일 떄, 버튼 색상이 활성화 된다면?
-
onChange 👉 두 글자를 입력하고 마우스로 다른곳을 클릭했을 때 버튼 색상 변경
-
onInput 👉 두 글자를 입력하는 순간 버튼 색상 변경
참고로, 리액트에서는 onChange도 onInput처럼 input value가 변경될 때마다(focus out을 꼭 하지 않아도, 입력 중에도) 발동된다.
