onKeyDown, onKeyPress 구현 시 한글 마지막 글자가 남는 문제

Description

구현하고자 했던 모습

• inputfield에서 사용자가 글자를 타이핑할 때, 글자를 입력할 때마다 inputfield에 글자가 렌더링
• 타이핑 후 send button 클릭하거나 엔터키 입력 시 inputfield는 빈 값으로 초기화되고 입력 값은 서버에 전송

문제점

• inputfield에서 send button 클릭 시에는 기대했던 것과 같이 동작하는데, 엔터키를 치면 inputfield가 초기화 되지 않고 마지막 글자가 inputfield에 남아있는 문제가 발생한다.

엔터키 입력 후 초기화가 되지 않고 마지막 글자가 남는다

IME(Input Method Editor) composition

결론적으로 이유는 영문과 한글(뿐만 아니라 일본어, 중국어 등)의 입력 처리 방식이 다르기 때문이다.

영어는 키보드 입력 = 알파벳 하나 = 한 글자 단위로 처리가 가능하지만, 한국어, 일본어 및 중국어 등은 키보드 입력 즉, 자음/모음의 조합이 끝나야 한 글자 단위가 생성되기 때문에 입력의 변환 과정이 필요하다. (키보드를 입력하다 보면 영문과 달리 한글은 한 글자 입력이 끝나기 전까지 글자에 밑줄이 남아 아직 조합 중인 글자임을 알 수 있다.)

이를 처리해주는 것이 IME로 OS단에서 IME는 자음/모음 조합을 위해 키 입력에 대한 이벤트를 처리하는데, onKeyDown을 사용할 경우 브라우저에서도 키 입력에 대한 이벤트를 처리하게 되어 중복 처리가 되는 것이다.

현상으로는 글자가 남아있는 것처럼 보이지만, 원인은 키 입력 이벤트의 중복 처리로 글자가 두 번 입력되는 것 때문이었다.

Solution

onKeyUp 사용

key down과 key up 구분이 필요 없는 케이스라면 onKeyDown 대신 onKeyUp을 사용하여 이벤트 시점을 분리하여 문제를 해결할 수 있다.

(예전 블로그들 보면 onKeyDown 대신 onKeyPress를 사용해서 해결된 경우가 많았는데, onKeyPress는 공식적으로 deprecated 되었다.)

isComposing 사용

JavaScript 및 React에서는 현재 단어가 composition 중인지 상태를 제공하고 있고, composing 상태 일 때는 return 되도록 처리해주어 이벤트 중복 발생을 방지할 수 있다.

React에서는 event.nativeEvent.isComposing 으로 제공된다.

const handleKeyDown = (event) => {
 if(event.isComposing) return; 
  // 키보드 이벤트 처리 코드
}

const handleKeyDown = (event) => {
 if(event.nativeEvent.isComposing) return; 
  // 키보드 이벤트 처리 코드
}