[React] KeyDown, KeyUp 한국어 2번?

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

• 특정 환경에서 한글 입력 시 composing 단계를 거치는데 이게 완료되지 않아 keyCode나 which 값이 229가 나오는 에러가 발생한다고 한다.
• 이 229 에러가 발생해 그 연장선으로 key event가 제대로 작동하지 않아 결국 함수가 두 번씩 실행된 것 같은데, 두 번 실행에 대한 정확한 사유는 적혀있지 않았다.
• onKeyDown을 사용하고, composing 단계랑 keyCode === 229 일 때 return 하는 방법으로 걸러주어 밑의 작성된 코드를 정상적인 동작을 하게끔 만들어 주는 것으로 파악된다.

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

 

 

 

참고1: https://4sii.tistory.com/473

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

참고2: https://velog.io/@o1_choi/isComposing