개발일지

한글 입력할 때 keydown이벤트 중복 현상 본문

[트러블슈팅] 오이 프로젝트!

한글 입력할 때 keydown이벤트 중복 현상

박수미/ 2024. 11. 25. 19:49

🥹 문제 발생

사용자에게 입력받은 값에 적용해 놓은 keydown이벤트 중복 발생되어 메시지 전송 중 오류가 발생하였다.

 

🤔 문제 원인 - onCompositionStart 및 IME 입력과의 충돌

이 문제는 한국어, 일본어, 중국어와 같은 복합 입력 방식(IMF, Input Method Framework)을 사용하는 언어에서 발생합니다.

복합 입력 방식은 일반적인 영어 입력과 달리 조합(Composition) 단계를 거치는데 이로 인해 React에서 다음과 같은 문제가 발생할 수 있습니다.

1. 조합 중에도 키 입력 이벤트(keydown, keypress, keyup)가 호출됨

- 조합이 완료되지 않은 상태에서 입력 처리가 발생합니다.

2. 이벤트 중복 호출 또는 순서 어긋남

IME의 입력 상태에 따라 이벤트가 여러 번 호출되거나 keydown, keyup 등의 이벤트 순서가 어긋날 수 있습니다.

 

👍🏻 해결 방법

onCompositionStart와 onCompositionEnd를 사용해 IME 입력 상태를 관리하고, keydown 이벤트를 처리할 때 이를 확인하여 처리하기!

onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={() => setIsComposing(false)}

 

해결 완료 😚