[React] 한글 입력시 엔터키 이벤트가 두번 실행되는이유

jini·2025년 4월 5일

TIL 김민태교육 김민태부트캠프 김민태의데브캠프 패스트캠퍼스김민태 패스트캠퍼스프론트엔드 프론트엔드부트캠프

패스트캠퍼스 데브캠프

목록 보기

18/19

React로 검색 기능을 구현하면서 Enter 키 이벤트가 두 번 실행되는 현상이 있었다. 처음에는 내가 짠 로직에 비효율적인 부분이 있나 싶어서 계속 찾다가 구글링해본 결과 한글, 일본어, 중국어 등 조합형 문자 입력 시스템에서는 입력 시 내부적으로 문자를 조합하는 과정에서 해당 문제가 발생한다는 것을 알게되었다.

이번 글에서는 해당 문제의 원인을 짚어보고 해결한 방법을 기록하고자 한다.

문제 상황

<input
  type="text"
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      console.log('Enter pressed!');
    }
  }}
/>

위 코드에서 영어 입력 시에는 문제가 없지만,
한글 입력 후 Enter를 누르면 console.log가 두 번 출력된다.

왜 이런 문제가 발생할까?

이 현상의 핵심 원인은 IME(Input Method Editor, 입력기)가 작동하는 방식과 관련이 있다는 것이다.

영어와 다르게 한글, 일본어, 중국어 등의 조합형 문자 입력 시스템에서는 입력 시 내부적으로 아래와 같은 이벤트 흐름이 발생한다.

compositionstart: 조합 시작
compositionupdate: 조합 중
compositionend: 조합 완료
keydown: 키 눌림 감지 (여기서 문제가 발생)⭐️

즉, 한글 입력 중 Enter를 누르면 compositionend 이후에 keydown 이벤트가 다시 발생하면서 Enter가 두 번 실행되는 것처럼 보이는 것이다.

해결 방법: isComposing 상태 사용하기

React에서 조합 상태를 추적해서, Enter 이벤트가 중복 실행되지 않도록 막았다.

예제 코드

function InputBox() {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
      console.log('Enter triggered');
    }
  };

  return <input type="text" onKeyDown={handleKeyDown} />;
}