Enter 키 이벤트 한글 입력 오류

문제 정의

할일 추가 시 UI/UX 관점에서 엔터를 눌렀을 경우에도 할일이 추가 되게 설정을 하였다.

keydown 이벤트가 발생하였을 경우 Enter 키일 경우에 handleSubmit 을 실행하여 할일을 추가한다.

 

const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key == 'Enter') {
      handleSubmit()
    }
  }

 <InputField
        className="w-[361px] bg-white placeholder:text-text4"
        placeholder="50자 이내로 작성해주세요"
        value={todoInput}
        onChange={(e) => setTodoInput(e.target.value)}
        onKeyDown={onKeyDown}
      />

 

 

문제 발생 영상

한글입력 후 엔터 하여 할일 추가 시 끝의 단어 한개가 더 추가되어 입력된다.

마우스로 추가 시에는 발생 하지 않음

 

 

 

원인 추론

✅ 원인: IME(한글 입력기) 확정 시 Enter 이벤트가 두 번 발생

한글 입력은 영문과 다르게 IME(입력기)를 통해 입력됩니다.

예를 들어:

• 키보드로 ㅇ ㅏ ㄴ을 누르면 → 안 이라는 한 글자가 완성됨
• 이때 Enter를 누르면:
  1. 한글 조합을 확정하고
  2. 그 확정된 입력을 제출하는 2단계 이벤트가 발생

즉, onKeyDown에서 Enter가 두 번 들어오는 이유는:

onKeyDown → compositionend → 다시 onKeyDown(Enter)

또는

Enter 키가 IME 입력 확정과 실제 동작 둘 다에 사용되기 때문입니다.

 

 

조치 방안 작성과 구현

 

✅ 해결 방법: IME 조합 중인 상태에서는 Enter 무시

React에서는 compositionstart, compositionend 이벤트를 사용해서 IME 입력 중인지 판단할 수 있습니다.

 

🔧 수정 코드 예시

const [isComposing, setIsComposing] = useState(false);

const onKeyDown = (e) => {
  if (e.key === "Enter" && !isComposing) {
    console.log("✅ Enter key pressed");
    sendMessage();
  }
};

const onCompositionStart = () => {
  setIsComposing(true);
};

const onCompositionEnd = () => {
  setIsComposing(false);
};

 

그리고 <input> 에 이벤트를 붙입니다

 

 <InputField
        className="w-[361px] bg-white placeholder:text-text4"
        placeholder="50자 이내로 작성해주세요"
        value={todoInput}
        onChange={(e) => setTodoInput(e.target.value)}
        onKeyDown={onKeyDown}        
        onCompositionStart={onCompositionStart}
        onCompositionEnd={onCompositionEnd}
       />

 

 

결과 정리

• 한글 입력 중 Enter는 무시됨
• 조합이 끝난 후에만 메시지 전송
• 영문/숫자 등은 그대로 Enter 한 번에 전송