onKeyDown={(e) => {
if (e.key === 'Enter') {
sendMessage();
}
}}한글 입력 후 엔터키를 누르면 다음과 같이 한글 마지막 글자가 중복해서 send되는 버그가 있다.
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
isComposing이라는 키보드이벤트가 있는데 입력문자가 조합문자인지 아닌지를 알려주는 이벤트이다. 요게 이벤트로 들어와서 문제가 생겼던 것.
리액트 코드로 isComposing에 접근하기 위해서는 event.nativeEvent.isComposing으로 접근해야 한다.
리액트의 이벤트가 합성 이벤트(SyntheticEvent)이기 때문임.
리액트의 공식 문서를 보면 "브라우저의 고유 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조하세요." 라는 문구가 있었다.
navtiveEvent 어트리뷰트를 사용해 브라우저의 고유 키보드 이벤트에 접근하여 isComposing 프로퍼티를 사용하여 문제를 해결할 수 있다.
onKeyDown={(e) => {
if (event.nativeEvent.isComposing) return;
sendMessage();
}}참고문서
