[keyDown, keyUp Event] 한국어 입력 문제 해결 : e.nativeEvent.isComposing

keyDown/keyUp 이벤트를 사용할때, 영어는 괜찮지만 한국어로 입력하면 이런 문제가 발생하는 경우가 있다. 

🤔 Why?

 

이 문제는 한글의 조합형 입력 방식 때문이라고한다. 한글 입력은 여러 키 입력이 조합되어 하나의 글자를 완성하는 과정을 거치기 때문에, key Event가 발생하는 시점에는 입력이 완전히 완성되지 않을 수 있다고 한다.

 

 

e.nativeEvent.isComposing

 

 

이 속성은 사용자가 텍스트 입력 중에 문자 조합(예: 한글 자음과 모음 조합)이 진행 중인지 여부를 나타냅니다. 이를 사용하면 키 이벤트가 발생할 때 입력이 완성된 상태인지를 확인하여, 입력의 완성이 된 경우에만 검색처리를 실행하도록 한다.

  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (e) => {
    if (isVisible && e.key === "Enter" && !e.nativeEvent.isComposing) {
      handleSearch();
    }
  };

 

isComposing이 false여야 입력이 완료되었음을 나타내므로, !e.nativeEvent.isComposing 조건을 추가해주면 해결가능하다.