keyup/keydown에서 한글 입력 시 함수가 두 번 실행되는 경우

onKeyDown, onKeyUp은 키를 누르고 떼는 동작에 반응합니다. 

그래서 보통 input에 이벤트를 걸고 사용하게 되는데 한글을 입력하게 되면 함수가 두 번 실행되는 경우가 있습니다.

 

이 경우는 동아시아문자의(CJK)의 특이성 때문입니다.

한글을 예로 들면 한글은 자음과 모음의 조합으로 한 음절인 조합문자지만, 영어는 한 음절이 하나의 알파벳으로 이루어집니다. 

이 말은 우리가 input에 입력시마다 이벤트를 걸었을 때 우리가 키를 누르고 떼는 순간까지의 시간 동안에 이벤트가 발생하고 진행되는데, 그 시간 동안에 음절이 완성되면 다시 이벤트가 호출될 수 있다는거죠.

 

당연하지만 JS는 영어를 기준으로 작성되었기 때문에 우리는 이걸 따라야만 합니다.

 

해결방법으로는 두가지가 있습니다.

1.onKeyPress

onKeyup, keydown과는 다르게 keypress는 누를 때에 실행 됩니다. 따라서 함수를 한번만 실행할 수 있게 되죠. 

하지만 문제점이 있습니다. keydown/keyup과 달리 keyPress는 shift나 한/영키, backspace등 다른 키들을 인식하지 못해서 사용성에 제한이 있습니다. 

그렇다면 다른 방법은 뭐가 있을까요?

 

2.KeyboardEvent.isComposing

KeyboardEvent.isComposing은 입력된 문자가 조합 문자인지 아닌지를 반환하는 함수입니다. 이걸 사용하면 조합이 완성되기 전엔 false를, 완성 되면 true를 반환합니다.

KeyboardEvent.isComposing를 이용한다면 keydown, keyup을 부담 없이 사용 할 수 있습니다.