[트러블슈팅] onKeyDown 두 번 실행 / KeyboardEvent와 isComposing

onKeyDown

프리온보딩 기업 과제 수행 중 input창에 한글 입력 후 onKeyDown 이벤트 발생 시 해당 이벤트 핸들러가 두 번 호출되는 문제가 발생했다.
(윈도우 사용자는 문제가 없었고, macOS 사용자에게 문제가 나타났다.)

이는 입력창에서 한글을 입력할 때 글자가 조합 중인지 조합이 끝났는지 확인할 수 없는 경우 발생하는 문제였다.

따라서 이를 확인하는 프로퍼티인 isComposing을 사용해 문제를 해결했다.

또한 React의 이벤트는 합성 이벤트이기 때문에 고유 이벤트인 isComposing을 사용하려면 nativeEvent 어트리뷰트를 참조해야 한다.

React 공식 문서 참고

해결 코드

// onKeyDown 이벤트 발생 시 호출되는 이벤트 핸들러 함수

const listIdxHandler = (e: React.KeyboardEvent<HTMLFormElement>) => {
  if (e.nativeEvent.isComposing) return; // isComposing이 true일 경우 바로 return
  /* 이후 생략 */
};

Reference

https://velog.io/@o1_choi/isComposing