[1] 에러 설명
- Input 컴포넌트에서 검색어를 입력하면 InputResult 컴포넌트에서 받아온 data를 자동완성 해서 보여줍니다.
- 이때 Input 컴포넌트에서 방향키를 통해 InputResult를 선택할 수 있습니다.
- 방향키를 통해 선택하는 과정에서 한국어를 입력하고 방향키를 누르면 이벤트가 2번 발생하는 에러가 발생합니다.
- “테”를 검색하면 [코딩 필터링 테스트, 쇼핑 필터링 테스트, 코딩 필터링 테스트…]가 나옵니다.
- 이때 아래 방향키를 누르면 “코딩 필터링 테스트”가 선택되고 콘솔창에서 보이는 것 처럼 ArrowDown이 2번 찍히게 됩니다.
[2] 에러 해결 과정
- 영어를 입력했을 때는 위와 같은 에러가 발생하지 않았고, 한국어를 입력했을 때만 발생하는 걸 발견하여 korean input keydown devent twice 검색 키워드를 통해 검색하였습니다.
- 구글링을 통해 저와 같은 에러가 발생하는 깃헙 이슈를 발견했습니다.
- 요약하면 IME는 다양한 언어를 브라우저에서 지원하도록 변환시켜주는 어플리케이션인데, IME 과정에서 keydown 이벤트가 발생하면 OS와 브라우저 둘 다 keydown 이벤트를 처리하기 때문에 중복 이벤트가 발생하는 것이었습니다.
- 따라서 composition 중에는 이벤트를 막으면 해결되는 문제였습니다.
[3-1] 첫 번째 시도
- 깃헙에 있는 예시 코드를 적용했습니다.
- keyCode는 더 이상 사용되지 않기 때문에 isComposing만 사용했습니다.
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.isComposing) { return; } /* ... */ };
- 하지만 Reat에는 iSComposing을 제공하지 않기 때문에 에러가 발생합니다.
[3-2] 두 번째 시도
- 현재 프로젝트에선 Next.js와 TypeScript를 사용하고 있기 때문에 저와 같은 환경인 블로그를 참고하여 코드를 수정했습니다.
- 하지만
KeyboardEvent를 import하는 과정에서 에러가 발생하여 레거시 코드인 keyCode를 사용하여 임시로 해결하였습니다. - composition 중일 때는 keyCode로 229를 반환합니다.
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.keyCode === 229) { return; } /* ... */ };
- 프로젝트가 안정화 되면 이후에 리팩토링 할 예정입니다.
- 참고