개발일지
한글 입력할 때 keydown이벤트 중복 현상 본문
🥹 문제 발생
사용자에게 입력받은 값에 적용해 놓은 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)}
해결 완료 😚
'[트러블슈팅] 오이 프로젝트!' 카테고리의 다른 글
랜딩페이지 wheel이벤트 적용 후 top버튼 작동시키기 (0) | 2024.11.27 |
---|---|
디바운싱(Debouncing)으로 과도한 이벤트 발생 방지하기 (0) | 2024.11.26 |
반응형 사이트 wheel 이벤트 적용시 헤더 높이 빼는 방법 (0) | 2024.11.26 |
401 에러 예외처리하기! (0) | 2024.11.25 |
전체 Layout 컴포넌트 구분해서 css 변경하기 (0) | 2024.11.04 |