728x90
반응형
검색창에 검색어를 입력하고 키보드를 사용하여 위아래에 이동 시, 맨 처음에만 2칸이 이동되는 문제가 있었다.
즉, 맨 처음에 키보드를 사용하여 추천 검색어들을 이동할 때 함수가 2번 실행되는 문제점이 있었다.
결과적으로 조건식에 e.nativeEvent.isComposing === false를 추가해 주면 문제점은 해결된다.
![](http://t1.daumcdn.net/tistory_admin/static/images/xBoxReplace_250.png)
keyboardEvent.isComposing
이는 입력한 문자가 조합문자인지 아닌지를 판단한다.
한글은 조합문자이고, 영어는 조합문자가 아니다.
한글을 입력할 때 자세히 보면 입력 중인 글자 바로 아래 검은 밑줄이 생기는 경우가 있는데, 이 밑줄이 보이는 상황에서 키를 입력하면 이벤트가 2번 발생하는 이슈가 있다. 왜냐하면 글자가 조합 중인지, 조합이 끝난 상태인지 파악이 어렵기 때문이다.
그래서 위에서 설명한 이슈는 영어를 입력할 때는 발생하지 않지만, 한글을 입력할 때는 발생된다.
console.log(e.nativeEvent.isComposing)
콘솔에 e.nativeEvent.isComposing 값을 확인해보면,
첫 글자를 입력할 때, 공백을 입력할 때, 방향키를 사용할 때 false 값이 찍히고,
글자를 입력하는 동안에는 true,
Enter키를 누르면 true와 false가 함께 찍히는 것을 확인할 수 있었다.
방향키를 이동할 때를 조건식에 추가해주면 정상적으로 함수가 한 번 실행되는 것을 확인할 수 있다.
질문이나 잘못된 점은 댓글로 남겨주세요 :)💖
728x90
반응형
'React > 이슈 해결' 카테고리의 다른 글
[react + vercel] cra vercel로 배포하기 + cors 이슈로 인한 proxy 설정 (0) | 2023.05.08 |
---|---|
[React] 값을 수정할 때 페이지가 번쩍 거리는 현상 제거하기 (0) | 2023.04.15 |
[react] React에서 key의 역할과 컴포넌트를 다시 그리는 과정 (0) | 2023.02.15 |
댓글