[TroubleShooting] onKeyDown, onKeyPress 이벤트 문제

onKeyDown 이벤트 한글 에러

채팅 기능을 구현하던 중, 채팅을 보내면 채팅의 끝 음절이 한번 더 전송돼 채팅이 두 번씩 전송되는 에러를 발견했다.

채팅 부분 에러

영어와 숫자, 특수기호 등을 보내면 정상적으로 전송됐지만, 유독 한글만 전송하면 에러가 발생했다.

구글링을 해보니, onKeyDown 문제였다.
onKeyPress를 사용하면 간단히 해결된다는데, onKeyPress는 이미 deprecated된 상태라 쓰기가 싫었다.
좀 더 구글링을 해보니 해결책을 찾았다.

component

index.d.ts

영어, 숫자, 특수기호는 글자 조합이 안 되는 반면 한글은 조합 문자이기에 발생되는 문제였다.
인풋 창에 한글로 onChange가 진행되고 있을때, 글자가 조합 중인지 조합이 끝난 상태인지 컴퓨터가 파악이 안돼 이벤트가 두 번씩 호출되고 있었다.

mdn 설명에 따르면 KeyboardEvent.isComposing은 세션 내 이벤트가 발생했는지 여부를 나타내는 boolean값을 리턴한다고 한다.

밑에 mdn 결과를 보면 글자를 칠때 compositionstart 되었다가, '하' 글자 입력이 끝나고 다음 글자인 '이'로 넘어가자 compositionend가 되는 결과를 볼 수 있다. 그 다음 '이' 글자는 글자 밑에 검은 줄이 쳐져있고, compositionupdate가 진행중이다. 즉 아직 컴퓨터는 글자 조합이 끝났는지 아닌지 모른다는 상태다.

mdn 예시

그럼 문제의 에러 부분 콘솔을 보자.

해당 콘솔에는 e.native.isComposing의 boolean값이 찍히고 있다.

'ㅎ'만 쳤을때 false 값이 찍히고, 이후 글자를 조합하자 지속적으로 true 값이 찍힌다. 역시 여기서도 검은 줄이 나있다.

이 상태에서 엔터를 쳐서 채팅을 보내면 콘솔에 true 값, false 값이 각각 찍힌다. 즉 이벤트가 두 번 호출되는 것이다.
true값에서는 채팅의 끝 음절만 전송됐고, false일 때는 올바른 채팅이 전송됐다.

슬랙 채팅 화면

이 문제를 해결하기 위해서 e.nativeEvent.isComposing이 false일 경우만의 조건을 다니 채팅을 보낸 뒤 false값만 나오면서 정상적으로 이벤트가 한번 호출되었다.

hook

조건 추가 전

조건 추가 후

References

KeyboardEvent.isComposing - Web APIs | MDN

Element: compositionstart event - Web APIs | MDN