[React] 한글 입력시 마지막 글자 두 번 입력되는 이슈

Input, Textarea 등의 Element에서 한글을 입력하다보면, 입력 후 마지막 글자가 중복으로 하나 더 써져있는 경우가 있습니다.

영어에서는 발생하지 않는데, 그 이유는 한글같이 자음과 모음이 하나의 글자로 이루어진 경우는 알파벳처럼 하나의 문자와 다르게 여러 문자의 조합으로 이루어져 있기 때문입니다.

따라서, 입력창에서 한글을 입력할 때에 글자가 아직 조합 중인지 조합이 끝났는 지를 판단할 수 없는 경우에 발생할 수 있습니다.

이를 방지하기 위해서는

const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 if (e.nativeEvent.isComposing) {
   e.stopPropagation();
 }
}

위와 같이, 조합 중일 때는 이벤트 전파를 막는 식으로 조합이 끝난 후에만 의도한 이벤트를 한 번 실행시킴으로써 해결할 수 있습니다.

onChange, onBlur에서의 이벤트 처리 방식에 따라 stopPropagation 대신 early return 등의 로직이 들어갈 수 있음