[error]onKeyDown 이벤트 한글 중복 발생

🚨 발생한 문제 상황

todolist를 제작 하던 중, onkeyDown이벤트 발생시, handleAdd 함수를 호출하도록 작성했는데,
마지막 한글자가 중복되어 todo에 추가되는 문제가 발생했다...

문제 해결

처음 GPT에게 물어본 결과로는

onkeyPress 이벤트를 사용하는 것을 추천해주었지만, 코드에 실선이 생겨서 마우스를 가져다대니, "onKeyPress는 사용되지 않습니다." 라는 문구가 떴다.

위의 내용과 같이 현재는 잘 돌아가고 있지만, 앞으로 사라지게 될 것이기 때문에 사용을 지양해야한다.

따라서 나는 onKeyDown을 사용하되, 오류를 해결할 수 있는 방법을 찾아야 했다.

KeyboardEvent.isComposing

원인을 찾아보니 한글, 한자와 같이 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자를 계산하거나 조합하여 입력해주는 소프트웨어인 IME(input method editor)의 문제였다.

• event객체의 isComposing 프로퍼티는 event.nativeEvent 내부에서 조회할 수 있다.

IME가 문자를 조합하고 있는지 여부는 KeyboardEvent.isComposing의 값(boolean)으로 확인할 수 있다.
➡️조합중인 경우에는 true, 아닌경우에는 false값을 가진다.
(true는 문자를 조합중일때 반환되고, false는 조합이 다 끝난 뒤 반환된다.)

수정 후 코드

import React, { useState } from "react";
import "../styles/Footer.css";

export default function Footer({ AddTodo }) {
  const [text, setText] = useState("");
  const onChangeText = (e) => {
    setText(e.target.value);
  };
  const handleAdd = () => {
    AddTodo(text);
    setText("");
  };
  const handleKeyPress = (e) => {
    if (e.key === "Enter" && e.nativeEvent.isComposing === false) {
      handleAdd();
    }
  };
  return (
    <div className="footer">
      <input
        className="add-box"
        type="text"
        value={text}
        placeholder="Add Todo"
        onChange={onChangeText}
        onKeyDown={handleKeyPress}
      />
      <button className="add-btn" onClick={handleAdd}>
        Add
      </button>
    </div>
  );
}

수정 후에는 정상적으로 동작하는 것을 확인할 수 있었다.

비록 IME의 조합 기능 자체를 막을 수는 없었지만, 조건문을 추가하여 isComposing값이 false인 경우에만 함수를 호출하게 코드를 작성하여 문제를 해결할 수 있었다!