[React Error] onKeyUp, onKeyDown 이벤트 한글 입력시 2번 실행되는 이유와 해결 방법

 

onKeyUp, onKeyDown 이벤트 한글 입력시 2번 실행되는 문제

영어가 아닌 한글을 입력한 후 onKeyUp, onKeyDown 이벤트를 실행하면 중복으로 이벤트가 실행됨

 

 

---

원인

IME composition

IME는 브라우저에서 다양한 언어를 지원해주는 OS 단계의 어플리케이션

IME 과정에서 이벤트가 발생하면, 한글 변환 작업이 OS에서도 이루어지고 브러우저에서도 처리되면서 중복 발생하는 문제

 

isComposing

Web API 스펙에는 Event Target에 KeyboardEvent.isComposing 이라는 프로퍼티를 제공하고 있음

한글을 포함하여 비영어권 언어를 사용한다면 이 값을 참조하여 중복을 막을 수 있음

 

 

---

해결

isComposing 프로퍼티를 사용하여 한 번만 실행되도록 처리하기

/* 1번째 방법 */
const handleClickEvent = (event) => {
  if(event.nativeEvent.isComposing) return; 
  
  // 이벤트 작성
}

/* 2번째 방법 */
const handleClickEvent = (event) => {
  if(isComposing) return; 
  
  // 이벤트 작성
}