[JS] 한글이 두 번 입력되는 현상

채팅을 구현하는 도중 문제가 생겼다.

한글을 입력하면 한글 끝이 2번씩 입력되는 현상이 있었다.

영어나 특수문자를 입력하면 한번만 입력이 되는데, 한글만 입력하면 글자가 2번 입력되는 현상이었다.

 

먼저 문제의 원인은 한글이 조합문자라는 것이었다.

 

한글을 입력하면 마지막 글자 아래 검정색 줄이 있는것을 볼 수 있다.

한글을 제외한 경우

밑줄이 없는 것을 볼 수 있다.

 

 

 

해당 문제는 IME composition 때문에 발생한다.

IME란 한글, 중국어, 일본어 등 언어를 브라우저에서 지원하도록 언어를 변환하는 OS 단계의 어플리케이션이다.

IME를 하는 중 keydown 이벤트가 발생하면 OS와 브라우저에서 이벤트를 모두 처리하기에 keydown이 중복으로 발생한다.

즉, 비영어권 언어를 표현하는 과정에서 이 값은 true인 것이다.

 

 

isComposing을 콘솔로 찍어보니

이벤트가 2번 발생하는 것을 볼 수 있다.

 

영어를 입력할 땐 이벤트가 한번만 발생하는 것을 볼 수 있다.

 

 

해결책

 

위의 경우, 조합이 끝났음을 나타내므로 false인 경우에만 입력을 하도록 코드를 수정하면 문제가 해결된다.

 

이전 상태

해결

 

 

(isComposing은 고유 이벤트임으로, react에선 nativeEvnet 어트리뷰트를 참조해야한다.)

합성 이벤트(SyntheticEvent) – React

 

 

 

 

 

참조자료

 

React, 한글 입력시 keydown 이벤트 중복 발생 현상