[React] 한글 입력 시 onKeyDown 이슈

한글 입력 후 버튼을 클릭하여 메시지를 전송하면 문제가 없는데

엔터로 메시지를 전송하면 입력이 두 번씩 들어가는 문제가 생긴다.

반복 테스트를 해보니 어느 경우엔 그 이상으로도 메시지가 중복 전송된다.

입력값에 남아 있는 문자들 때문으로 추정된다.

클릭할 때 호출되는 함수와 엔터를 입력받아 호출되는 함수는 동일하다.

 

엔터를 입력하기 전 마침표를 찍거나 오른쪽 화살표 혹은 End 키를 눌러 커서를 마무리해주면 문제가 발생하지 않는다.

한글로 입력을 하면 커서가 마무리 되지 않기 때문에 이를 마무리해주면 오류가 나지 않는다.

영어를 입력했을 때와 한글을 입력했을 때의 차이가 조금 존재하는데 한글 입력은 마지막 음절에 계속 밑줄이 그어져있다.

한글은 한 음절에 여러 자음과 모음이 들어갈 수 있어서 추가 입력을 받기를 기다리는 것이다.

영어는 한 번에 알파벳 하나만 쓰기 때문에 한 자 한 자가 완성된다.

 

어쨌든 onKeyPress를 쓰면 이 문제가 해결되긴 한다. deprecated 되었다고 하는데

이런 이슈 때문인지 사라지지 않고 있다. 2011년 게시물에서도 onKeyPress가 이미 depcrecated인 모양인데.

onKeyPress는 한글을 인식 못하는데, 오히려 이 기능이 문제 해결의 실마리다.

 

이런 식의로 해결하기는 싫어서 별짓을 다 해봤지만 안 된다.

setSelectionRange 함수를 이용해 커서를 끝으로 보내봤지만 커서가 완성되지 않았고

window.dispatchEvent(new KeyboardEvent('keydown', {code: 'End'})) 으로 해보려고 했지만

리액트에서 자체적인 이벤트 발생을 위해 dispatchEvent 함수의 기능을 막아놔서

키 입력을 강제로 일으키게 할 수도 없다.

 

요새 문득 리액트를 쓰면 쓸수록 쓰기 싫어진다.

이런 프레임워크 없이 ES6+ 문법으로 충분하다는 생각이 드네.

 

onKeyPress를 정 쓰기 싫다면 플래그를 만들어서 처리해주는 수밖에 없을 것 같다.

  const onKeyDown = (e) => {
    if (e.code === "Enter" && message && isEnteredRef.current === false) {
      isEnteredRef.current = true;
      handleSendMessage();
    } else if (isEnteredRef.current === true) {
      isEnteredRef.current = false;
      setMessage("");
    }
  };