Large Rainbow Pointer
728x90
keydown 2번 실행되는 이유 (feat. 타입스크립트, NativeEvent)
💜 리액트/React2024. 6. 25. 01:02keydown 2번 실행되는 이유 (feat. 타입스크립트, NativeEvent)

발생한 문제검색어를 입력하고 검색 버튼이나 엔터를 눌렀을 때 검색이 되는 기능을 구현하고 있다. 위에 코드를 실행해 보니 엔터를 눌렀을 때 값이 두 번 찍히는 현상을 발견하게 되었다. (검색 버튼 눌렀을 땐 한 번) 그래서 혹시 reactStricMode 때문일 수도 있어 주석처리 했는데도 변함이 없었다. (참고로 Next.js 임)  문제 이유구글링을 통해 이러한 문제가 발생한 이유를 살펴보니 바로 한글 때문이였다.영어와 숫자와 달리 한글은 자음과 모음을 조합해서 만드는 언어라서 조합 중인 문자를 처리하는 과정에서 keydown 이 두 번이나 발생하는 것이라고 한다. 그래서 문자가 조합 중이면 keydown 이벤트가 발생하지 않도록 처리해야 한다. 문제 해결문제를 해결하기 위해 다음과 같이 절차를 진행..

728x90
image
loading