FrontEngineer JungBam
키보드 이벤트 이슈(중복 처리) 본문
카테고리를 추가하는 기능을 만드는 과정에서의 이슈
영어를 치면 정상 작동하지만 한글을 작성하면 끝음에 대해서 한번 더 처리하는 문제가 발생! 왜그럴까?
(그 증상과 문제를 만났을 때의 코드)
그래서 이 부분에서 왜 이런지 콘솔을 찍어보니, 이상하게도 한글을 치고 엔터를 누르면 두번의 이벤트가 들어오고, 영어를 치고 엔터를 누르면 한번의 이벤트가 들어오는 것을 확인할 수 있었다.
그래서 이것을 어떤방법으로 다가가야 내가 필요한 곳에서 처리가 가능할지를 찾아보다가 한글의 경우에 두개 이상의 글자가 조합을 통해 하나의 글자가 되는데 이러한 것을 잡을 수 있는 이벤트가 있었다.
(예를 들어, 말라 라고 쳐도 한글의 경우에는 아직 입력중으로 받아들인다. 말라 가 말락이 될지 말랏이 될지 모르기 때문에)
바로, event.nativeEvent.isCompressing 인데, 이 값은 이러한 합성문자의 경우에 이벤트가 발생하고 이 합성을 종료하는 시점에서 이제 합성이 끝났다 라고 인식하게끔해준다. 위의 사진을 보면 한글은 처음에는 아직 합성중으로 인식했다가 합성이 끝났구나 하면서 true를 한번 false를 한번 뱉어내는데에 반해 영어의 경우에는 합성이 없기때문에 바로 false로 내보낸다.
이를 통해서 수정한 코드, 이제는 정상적으로 동작이 된다.
반응형
'개발일지' 카테고리의 다른 글
"react/prop-types": "off" (0) | 2023.09.06 |
---|---|
intersection Observer 기능 컴포넌트화하기 (0) | 2023.08.31 |
제네릭 타입의 활용(비동기 요청값) (0) | 2023.08.29 |
프로필 이미지 수정 테스트 코드(base64 인코딩 테스트) (0) | 2023.08.25 |
React.FC와 React.ComponentType의 차이 (0) | 2023.08.25 |
Comments