한글 입력 시 Enter가 두 번 트리거 되는 이슈와 해결법

1. 문제 상황

React로 채팅, 댓글 등 입력창을 만들 때 한글을 입력하고 Enter를 누르면 onKeyDown이 두 번 실행되는 이슈를 경험한 적이 있나요?

예를 들어, 아래 코드처럼 Enter 키로 메시지를 보내게 했을 때:

<input
  value={message}
  onChange={e => setMessage(e.target.value)}
  onKeyDown={e => e.key === "Enter" && sendMessage()}
/>

한글 입력 후 Enter를 누르면 메시지가 2번 전송되는 현상이 발생할 수 있습니다.

2. 왜 이런 현상이 발생할까?

이 문제는 **IME(입력기, 특히 한글/일본어 등 조합형 문자)**와 브라우저의 이벤트 처리 방식에서 비롯됩니다.

한글 입력 시 IME가 활성화되어 문자 조합이 끝나고 Enter를 누를 때
1. IME 조합 종료 이벤트로 Enter가 한 번 발생
2. 실제 Enter 입력 이벤트가 또 한 번 발생

이로 인해 onKeyDown에서 Enter가 두 번 감지되는 것입니다.

3. 대표 재현 환경

Chrome, Edge 등 최신 브라우저에서 React 앱
한글 입력 후 Enter
특히 Windows 환경에서 빈번 (macOS에서도 드물게 발생)

4. 해결 방법

4.1. 조합 중 상태 체크

React에서는 compositionstart, compositionend 이벤트를 활용해 IME 조합 중인 상태를 따로 관리하면 됩니다.

import { useRef } from "react"

function ChatInput() {
  const [message, setMessage] = useState("")
  const isComposing = useRef(false)

  return (
    <input
      value={message}
      onChange={e => setMessage(e.target.value)}
      onCompositionStart={() => { isComposing.current = true }}
      onCompositionEnd={() => { isComposing.current = false }}
      onKeyDown={e => {
        if (e.key === "Enter" && !isComposing.current) {
          sendMessage()
        }
      }}
    />
  );
}

설명

한글 입력(조합 중)에는 Enter를 무시
조합이 끝난 뒤(실제로 입력 확정된 후)만 Enter를 처리

4.2. 라이브러리 사용시

Ant Design, Material UI 등 UI 라이브러리의 Input 컴포넌트도 비슷한 방식으로 IME 상태를 관리할 수 있습니다.

5. 마무리

한글 입력이 중요한 서비스라면 반드시 IME 조합 상태와 Enter 이벤트 중복 처리에 신경 써야 합니다.

특히 채팅, 댓글, 실시간 입력 등이 있다면 위 방법으로 이슈를 예방하세요!

참고