한글 이벤트 중복 입력 - IME composition

문제 - Enter 입력시 마지막 문자 자동 추가

오디언스를 검색할 떄 한글을 입력하고 enter를 누르면 마지막 문자가 자동으로 추가.

해결

IME composition

IME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS 단계의 어플리케이션.

IME 과정에서 keydown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 모두 처리하기 때문에 keydown 이벤트가 중복으로 발생하게 됩니다.

즉, IME를 통해 한글, 일본어, 중국어 등을 변환하는 과정(composition)에서 keydown 이벤트는 OS 뿐만 아니라 브라우저에서도 처리되기 때문에 중복 발생됩니다.

isComposing

이를 위해 Web API 스펙을 확인하며 event target에 KeyboardEvent.isComposing 이라는 프로퍼티를 제공합니다.

즉, 한글 등 비영어권 언어를 표현하는 과정에서 이 값을 참조하면 true값을 반환합니다.

keyDown이 발생할 때마다 console을 찍은 화면입니다.

"학생"만 쳤을 때는 아직 조합중이므로 isComposing 상태가 true입니다.
하지만 조합중인 상태에서 enter를 입력하게되면 조합처리가 끝난 뒤 입력처리가 이루어집니다.

조합 중 key입력이 일어나게 된다면 이벤트가 2번 호출되는 문제가 발생합니다.

onKeyDown={e => {
      if (e.nativeEvent.isComposing) return;
      if (e.key === "Enter") {
           e.preventDefault();
           onEnter && onEnter();
       }
   }}

e.nativeEvent.isComposing 을 통해 조합이 완료된후 Enter키 이벤트를 실행하면 됩니다.