[React] onKeyDown 이벤트 한글 마지막 글자 한번 더 입력 오류
예전에 프로젝트하면서 해쉬태그 관련 컴포넌트를 만들었던적이 있어서 그대로 가져와서 이번 프로젝트에서 사용하려했는데 onKeyPress 이벤트가 Deprecated 되었다고 나와서 MDN 가이드대로 keydown 으로 수정해보았다. 여기서 문제가 발생했는데 onKeyPress 이벤트에서는 아무 문제가 없는데 onKeyDown 이벤트를 사용했을때 동영상에서 처럼 마지막 글자가 한번더 출력되는 문제가 발생했다. 내가 작성한 setState와 관련한 비동기적인 동작 순서를 내가 잘못생각해서 발생되는 문제인줄 알았는데 찾아보니 해당 문제는 크롬 브라우저에서 한글을 입력하는 경우만 해당 문제가 발생하는것을 알게됐다. 키보드 이벤트 발생시 이벤트 핸들러가 두번 호출되는 문제였다. 한글의 경우 자음과 모음의 조합으로 한 음절이 만들어지는 조합 문자이기 때문에 글자가 조합중인지, 조합이 끝난 상태인지를 알 수 없기 때문에 발생하는 문제였다. 해당 문제는 isComposing 이라는 값을 체크해 해결할 수 있었다. 그런데 여기서 또 하나의 문제 event.isComposing 또는 event.target.isComposing을 사용하려고해도 해당 메소드가 없다고 나왔다. 예전에 React 공식 문서에서 브라우저 고유 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조하라는 글을 본적이 있었다. 아래 링크를 첨부했다. 아래처럼 코드를 작성하면 아래 동영상처럼 해결이 된다. 문제 해결 완료! 참고하면 좋을만한 링크 https://levelup.gitconnected.com/javascript-events-handlers-keyboard-and-load-events-1b3e46a6b0c3 https://ko.reactjs.org/docs/events.html#overview
