KeyBoardEvent: keyup, keydown, keypress

React로 카카오톡과 같은 채팅 컴포넌트를 만들던 중 발견한 버그와 해결한 방법을 기록해봅니다. 위 이미지는 내가 만들고있던 Chatting.tsx 컴포넌트다. 기록된 메시지들이 보이는 부분이 ChattingList.tsx 이고, 메시지를 입력하는 아랫부분이 ChattingInput.tsx 이다. ChattingInput 에 텍스트를 입력하고 Enter를 누르거나 전송을 클릭하면 입력된 텍스트가 ChattingList에 추가되는 기능을 구현했다. 그런데, 영문을 입력하면 정상적으로 ChattingList에 잘 추가가 되었지만 이상하게 한글만 입력하면 입력된 텍스트와 그 텍스트의 마지막 부분이 잘려서 두번 이벤트가 발생하는 것이었다... 위 이미지와 같은 현상이 발생했다. 그래서 개발자도구에서 break..