onKeyUp, onKeyDown 한글 입력 시 두번 실행되는 오류

개요

<input type="text" onKeyUp={(e)=>pressEnterHandler(e)}/>

function pressEnterHandler(e) {
  if (e.key === "Enter") {
    console.log('pressEnterHandler 실행');
    test();
  }
}

function test() {
  console.log('test');
}

위와 같은 코드를 사용할 때 

input에서 엔터를 누르면 

 

이렇게 두 번씩 실행되는 에러를 경험했다.

 

이리저리 다양한 방법으로 시도해보았는데 

해결할 수 없었고

 

검색을 하다보니 한글 입력 시 이런 현상이 있다는 사실을 알게 되었다. 

확인해보니 숫자나 영어 입력 시에는 정상 작동을 하는 것을 확인할 수 있었다.

 

해결 방법

https://github.com/vuejs/vue/issues/10277#issuecomment-873337252

Korean input trigger keydown event twice · Issue #10277 · vuejs/vue

https://minjung-jeon.github.io/IME-keyCode-229-issue/

[Web] IME keyCode 229 Issue(Chrome+한글, Android Mobile 환경) | MINJUNG

 

링크된 위 기사에 따르면

특정 환경에서 한글 입력 시 composing 단계를 거치는데 이게 완료되지 않아

keyCode나 which 값이 229가 나오는 에러가 발생한다고 한다.

 

이전에 윈도우 환경의 팀원이 짠 엔터를 눌러 태그 추가하는 기능이 

맥인 내 환경에서 제대로 동작을 하지 않았던 이유도 이 것 때문으로 보인다.

 

이 229 에러가 발생해 그 연장선으로 key event가 제대로 작동하지 않아

결국 함수가 두 번씩 실행된 것 같은데 

두 번 실행에 대한 정확한 사유는 적혀있지 않았다.

 

아무튼 위 글에 나온 해결 방법으로

onKeyDown을 사용하고 

composing 단계랑 keyCode === 229 일 때 return 하는 방법으로 

걸러주어 밑의 작성된 코드를 정상적인 동작을 하게끔 만들어 주는 것으로 파악된다.

 

이에따라 수정된 코드는 아래와 같다.

function pressEnterHandler(e) {
  if (e.isComposing || e.keyCode === 229) return; 
  if (e.key === "Enter") {
    console.log('pressEnterHandler 실행');
    test();
  }
}

적용 후 테스트해보니 확실히 두 번씩 실행되는 문제를 해결할 수 있었다.

 

위 issue는 Vue에서 문제를 겪어서 만들어졌지만 

아무래도 JavaScript 자체적인 문제가 있었던 것으로 보이고

한글 뿐만 아니라 다른 언어를 사용할 때도 비슷한 현상이 발생하는 것으로 파악된다.

 

이전에 태그 관련 문제는 코드를 수정해 onKeyUp으로 해결하긴 했었는데

그 때는 함수 안에서 함수를 실행하는게 아니다 보니 이번 경우에 해당되지 않았던 것 같다.

 

역시 프론트엔드는 너무 빠른 변화 때문에 알다가도 모르겠다.

그래도 해결되서 다행!