🚀 input 태그에 한글 입력 후, Enter를 누르면 함수가 두번 호출되는 오류

문제 상황

입력창에 값을 입력하고, 옆의 send 아이콘을 누르면 함수를 호출하여, 소켓을 통해 메세지를 전송하도록 구현된 상태
입력창에 값을 입력 하고, Enter를 눌려도 함수를 호출하는 기능을 추가하고자, 다음과 같이 onKeyDown 이벤트를 추가

export default function ChatInput() {
  const [message, setMessage] = useState('');
  const { roomId } = useParams();

	// 소켓을 통해 메세지를 전송
  const sendMessage = () => {
    socket.emit(
      'message',
      { message: message, roomId: roomId },
      (response: any) => {
        console.log(response);
      },
    );;
    setMessage('');
  };

  const handleOnKeyDown = (
    e: React.KeyboardEvent<HTMLInputElement>,
  ) => {
    if (e.key === 'Enter') {
      console.log('Enter');
      sendMessage();
    }
  };
  return (
    <div>
      <div className="flex flex-row">
        <input
          type="text"
          placeholder="채팅을 입력하세요"
          className="bg-grayscale-700 rounded-lg w-full p-3 mr-2 focus:outline-none"
          onChange={(e) => setMessage(e.target.value)}
          value={message}
          onKeyDown={handleOnKeyDown}
        />
        <button onClick={sendMessage}>
          <SendIcon />
        </button>
      </div>
    </div>
  );
}

input 태그에 onKeyDown 이벤트를 달고, key가 Enter라면 소켓 메세지를 전송하도록 구현

⛔️ 이벤트가 2번씩 발생하는 오류 발생!!

이상한 점은 영어나 특수문자를 입력하면 문제가 없지만, 한글을 입력하면 문제가 발생한다

문제 원인

IME(Input Method Editor) 때문이였다

IME는 한글과 같이 자음과 모음이 분리되지 않고 한 글자로 입력할 수 있도록 도와주는 시스템 소프트웨어이다

마지막으로 입력된 글자가 완성된 글자인지,완료되지 않은 글자인지 알 수 없기때문에, 각 상태에 대해 2번 호출하는 것이다

문제 해결

한글이 완성된 상태를 알아야하는데, event 객체의 isComposing을 통해 알 수 있다

리액트는 합성 이벤트(SyntheticBaseEvent) 이므로 naviteEvent 에 먼저 접근해서 isComposing을 가져와야 한다

  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.nativeEvent.isComposing) {
      return;
    }
    if (e.key === 'Enter') {
      sendMessage();
    }
  };