한글 입력시 두번 이벤트 발생되는 현상 - onKeyPress, onKeyDown, onKeyup

🔍 문제

 

input 태그에 onKeyDown을 사용했을 때 영어는 이벤트가 한번 들어가는데 한글을 입력하면 두번 이벤트가 발생하는 현상이 있었다.

 

 

🔍 원인

• KeyboardEvent.isComposing라는 객체가 입력된 값이 조합문자인지 아닌지 확인하는데 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자로 인지되고 영어는 조합문자가 아닌 것으로 입력된다. 한글이 입력될때는 KeyboardEvent.isComposing가 true, 영어일 때 KeyboardEvent.isComposing가 false로 입력되면서 한글은 onKeydown이벤트가 들어갔을때 조합문자인 상태로 한번, 해지된 상태에서 또 한번으로 이벤트가 두번 들어가게된다. KeyboardEvent.isComposing가 false인 상태에서 이벤트를 수행할 수 있도록하면 해결된다.
• onKeyUp와 onKeyDown이 keyCode이고 onKeyPress가 ASCII값이어서 한/영 구분 못하기 때문에 onKeyPress를 사용하면 해결할 수 있지만 onKeyPress는 Deprecated되었으므로 언젠간 없어질 수 있는 이벤트속성이니 다른 방법을 찾아보자.

✔️ 해결 방법

input value 값이 null인 경우에 빠른 리턴 코드를 추가해주자.

1️⃣ 기존 코드

  const handleKeyDown = e => {
    if (e.key === "Enter") onAddTodo();
  };

2️⃣ 해결 코드

input value가 null일때 빠른 리턴해주기

  const handleKeyDown = e => {
     if (inputText.trim() === "") return;
     if (e.key === "Enter" && !e.nativeEvent.isComposing) {
    onAddTodo();
    }

  };

3️⃣ 모질라 해결방법

해당 KeyCode가 입력되면 빠른 리턴해주기. 단, KeyCode는 Deprecated되었으니 유의.

eventTarget.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event

🪢 해결

✔️ onKeyPress, onKeyDown, onKeyUp 비교

⭐️ onKeyPress, onKeyDwon

키를 누를 때 발생하는 이벤트, keydown 이벤트는 눌리거나 해제된 키를 나타내고, keypress 이벤트는 입력 중인 문자를 나타낸다.

⭐️ onKeyUp

눌러진 키가 올라올 때 발생하는 이벤트.