react 한글 입력 시 keydown 이벤트 중복 발생하는 문제 해결

컴포넌트를 개발하면서 겪은 문제를 해결한 과정을 남겨보려고 한다.

 

문제

input 요소에 값을 입력하고 'Enter' 키를 부모 컴포넌트에 보내주는 'keydown' 이벤트 핸들러를 등록했다.

영어, 숫자, 특수문자는 정상적으로 동작했지만 한글을 입력하면 이벤트 핸들러가 중복해서 동작하는 문제가 발생했다.

한글 입력 후 Enter 시 2회 호출

 

구글링을 해보면 이 문제의 해결 방법으로 대부분 keypress 이벤트를 사용하라고 나와있다.

하지만 keypress 이벤트는 공식적으로 deprecated 되었기 때문에 패스.

 

이름만 들어도 낯선 Web API composition event를 확인해서 문제의 원인을 찾을 수 있었다.

아래 예시는 MDN 공식 사이트에서 테스트 가능하다

알파벳 입력 시 composition event 미발생

 

한글 입력 시 composition event 발생

 

한글은 기본적으로 합성 문자이기 때문에 자음이든 모음이든 composition event가 발생한다.

일단 input 값 입력 시 문자 간의 차이점은 파악했다. 그렇다면 어떻게 문제를 해결할 수 있을까?

 

composition event가 발생하는 것을 보면 start, update 반복, end 순서이다.

즉, 문자가 조합 중인지 여부를 확인할 수 있는 값이 존재할 것이라는 추측을 할 수 있었다.

그 값은 isComposing이라는 boolean 변수다.

 

한글을 입력하다가 Enter 입력 시 아직 composition update 상태이므로(isComposing: true)

update, end 순서로 두 번 실행이 되는 것이다.

 

다 해결했다고 생각했는데 react의 KeyboardEvent에 isComposing 프로퍼티가 없었다...

react KeyboardEvent

 

React에서 Event 객체가 어떻게 구현되어 있는지 코드를 살펴보니 상속의 끝에는 결국 Web API의 Event들이 있었고

이 Event 객체를 nativeEvent라는 프로퍼티에 저장해 두고 있다.

 

해결

문제를 해결한 결과 코드는 생각보다 굉장히 단순하다.하지만 레퍼런스를 꼼꼼히 읽으면서 문제의 원인을 정확히 파악하고 증명하는 과정이 더 중요하다고 생각한다. 

import { KeyboardEvent } from 'react'

const onKeydown = (e: KeyboardEvent) => {
  if (e.key === ENTER && !e.nativeEvent.isComposing) {
    onSearch(inputValue)
  }
}