한글 입력 이벤트 중복 발생 문제

문제 상황

• Mac 환경에서 채팅 입력 시 한글 마지막 글자가 중복으로 입력되는 현상 발생
• 예시: "안녕" 입력 시 → "안녕” 출력, “녕" 출력

원인 분석

1. IME (Input Method Editor) 동작 방식
   • 영어가 아닌 문자(한글, 한자 등)는 IME를 통해 문자를 조합
   • 조합 중인 상태에서 입력 이벤트가 발생하면 중복 입력이 발생
2. Mac의 특수성
   • Mac 환경에서는 키보드 입력 이벤트와 IME 통합이 불완전
   • IME 조합 중에도 keyDown 이벤트가 발생하여 의도치 않은 동작 유발
3. 문제가 된 코드

const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.key !== 'Enter') return;
    // IME 조합 중인지 확인하지 않고 바로 이벤트 처리
    event.preventDefault();
    if (!event.shiftKey) {
      handleSubmit(event);
      return;
    }
    // ...
};

해결 방법

1. React의 isComposing 체크 추가

const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (event.nativeEvent.isComposing) return; // IME 조합 중일 때는 이벤트 무시
    if (event.key !== 'Enter') return;

    event.preventDefault();
    if (!event.shiftKey) {
      handleSubmit(event);
      return;
    }
    // ...
};

기술적 배경

• IME 이벤트 종류
  • compositionstart: 조합 입력 시작
  • compositionupdate: 조합 중인 문자 업데이트
  • compositionend: 조합 입력 완료
• React의 지원
  • event.nativeEvent.isComposing을 통해 IME 조합 상태 확인 가능
  • 네이티브 DOM 이벤트의 isComposing 속성을 래핑

참고 자료

• [MDN - Element: compositionstart event](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event)
• [Stack Overflow - IME composition handling](https://stackoverflow.com/questions/76820259/js-ime-composition-and-mac-accent-menu-handling-in-custom-input-field)

2024-11-21.6.01.05.1.mov