<input> 이벤트의 실행 순서는? onChange, onKeyDown, onKeyPress, onKeyUp, onInput

input tag의 event 중 onKeyDown, onKeyPress, onKeyUp, onInput, onChange에 대해 정리를 하려고 한다.

이번에 몰랐던 사실들을 많이 알게 되었다  🤔 🤔

 

 

그럼 각 이벤트에 대해 먼저 알아보자!

onKeyDown

키보드에서 키가 눌렸을 때의 그 시점이다.

다른 이벤트와의 차이점은 onKeyDown만 눌렀을 때, 계속 실행이 된다는 것이다.

 

onKeyPress

onKeyDown과 마찬가지로 키보드에서 키가 눌렸을 때의 그 시점이다.

다른 이벤트와의 차이점은 KeyCode 값이 아닌 ASCII 값이기에 한글을 포함해 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다는 것이다. 아래의 사진을 보면, 한글을 입력했을 때 해당 이벤트만 콘솔을 찍지 않는 것을 알 수 있다.

하지만 onKeyPress는 deprecated 된 이벤트이다. 따라서 MDN에서는 onkeydown 이벤트를 권장하고 있다.

onKeyUp

키를 눌렀다가 떼었을 때 발생하는 이벤트이다.

 

onInput

input의 값이 바뀔 때마다 이벤트가 발생한다.

 

onChange

input의 포커스가 벗어났을 때, 입력된 값이 이전과 다르면 실행한다.

하지만!! 리액트에서 테스트했을 때 포커스가 벗어나는 것과 상관없이 input value가 바뀔 때마다 실행이 된다. 그래서 setState로 값을 바꾸려고 할 때에도 onChange를 쓰곤 했었다.

의문이 들어서 알아보니.. HTML에선 위의 onInput, onChange의 설명이 맞지만 리액트에서는 onChange도 onInput과 동일하게 작동된다. 이에 따라 사실상 동일한 이벤트가 되어버린 것이다.

 

리액트 공식문서에도 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.

 

뿐만 아니라 값을 바꿀 때에도

"onChange handler that updates the passed value."라고 되어 있다.

 

 

실행 순서

각각의 이벤트에 대해 콘솔을 찍어 보았다.

onKeyDown -> onKeyPress -> onInput -> onChange -> onKeyUp의 순서대로 실행이 된다.

 

자세하게 살펴보자면,

onKeyDown과 onKeyPress는 이벤트 발생 후에 문자가 입력된다.

따라서 첫 입력 시 값이 찍히지 않는 것을 알 수 있다.

 

각각의 이벤트들이 비슷하면서도 다르기 때문에, 사용할 때 주의해야 된다.

불필요한 함수 호출이 일어날 수도 있고 의도치 않은 에러가 발생할 수 있다.