한글 두번씩 입력되는 버그해결

지금까지 만든 프로젝트에서 한글이 두번씩 입력되는 버그가 있다.

https://velog.io/@euji42/solved-%ED%95%9C%EA%B8%80-%EC%9E%85%EB%A0%A5%EC%8B%9C-2%EB%B2%88-%EC%9E%85%EB%A0%A5%EC%9D%B4-%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0

MMZ 일지 19. 한글 입력할 때 2번 입력이 되는 경우 in React, Typescript

이 글을 보고 도움을 받아 해결했다.

 

// components/ChantInputMessage.tsx

return (
    <div className="p-5">
      <Input
        placeholder="send message"
        onKeyDown={(e) => {
          if (e.key === "Enter" && e.nativeEvent.isComposing === false) {
            // enter 키를 누르면 메세지가 전송되도록.
            // e.nativeEvent.isComposing === false - 한글 두번 입력현상 방지
            handleSendMessage(e.currentTarget.value);
            e.currentTarget.value = ""; // 메세지를 전송하고 나서 칸을 비워준다.
          }
        }}
      />
    </div>
  );

e.nativeEvent.isComposing === false

keydown event에 조건으로 추가해줬다.

 

Github

https://github.com/Wunhyeon/Next-Supabase-Chat/tree/fix-hangeulInsertTwice