[React] IME 조합 문제로 인한 입력 포커스 이동 버그 해결

React로 폼을 만들고, 입력창에서 Enter 키를 누르면 다음 필드로 포커스를 이동시키는 기능을 구현했다.
그런데 한글 입력 시 마지막 글자가 다음 인풋 필드로 이동하는 버그가 발생했다.
영어, 숫자, 특수문자는 문제가 없고, 한글에서만 나타났다.

 

원인: IME 조합 상태와 onKeyDown 이벤트 타이밍의 충돌

이 문제는 IME(Input Method Editor, 입력기) 조합 방식과 이벤트 발생 순서가 충돌하기 때문에 발생한다.

 

IME의 입력 방식

한글은 조합형 입력 언어다. 예를 들어 ‘사’라는 글자를 입력할 때 실제로는 다음과 같은 과정을 거친다.
• 사용자가 ‘ㅅ’ 입력
• ‘ㅏ’ 입력 → 조합 → ‘사’ 완성

이때 조합이 끝나지 않은 상태는 브라우저에서는 isComposing = true 로 판단된다.

문제 발생 흐름
1. 사용자가 ‘사’를 입력 중이다.
2. 이때 ‘ㅅ’ + ‘ㅏ’는 아직 조합 중 상태다.
3. 사용자가 Enter 키를 누른다.
4. React의 onKeyDown 이벤트가 조합이 확정되기 전에 실행된다.
5. e.preventDefault()에 의해 포커스가 다음 인풋으로 강제로 이동된다.
6. 조합 중이던 글자 ‘ㅏ’가 다음 인풋에 붙게 된다.

이러한 흐름으로 인해 조합이 끝나기 전에 포커스를 옮기면서 문자 분리 현상이 발생하게 된다.

 

조합형 입력 언어 (Composition-based language): 여러 키 입력을 조합하여 한 글자를 완성하는 언어
ex. 한글, 히라가타/가타카나/한자

 

 

해결 방법: isComposing 상태를 체크하여 Enter 이벤트 처리

브라우저의 KeyboardEvent 객체에는 isComposing이라는 속성이 있다. 이를 통해 현재 입력이 조합 중인지 판단할 수 있다.

React에서는 이벤트 객체가 합성 이벤트(SyntheticEvent)이기 때문에 직접 isComposing 속성을 사용할 수 없다.
대신 e.nativeEvent.isComposing을 사용하여 판단해야 한다.

 

이 코드는 IME 조합 상태가 아닌 경우에만 Enter 키를 처리하여 다음 인풋으로 포커스를 이동시킨다.

export const handleEnterAsTab = (e: React.KeyboardEvent) => {
  if (e.key === "Enter" && !e.nativeEvent.isComposing) {
    e.preventDefault();
    const form = e.currentTarget as HTMLElement;

    const focusable = Array.from(
      form.querySelectorAll<HTMLElement>(
        'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
      )
    ).filter((el) => !el.classList.contains("ant-picker-input"));

    const index = focusable.indexOf(document.activeElement as HTMLElement);
    if (index > -1 && index < focusable.length - 1) {
      focusable[index + 1].focus();
    }
  }
};

 

 

 

React의 합성 이벤트(Synthetic Event)와의 관계

합성 이벤트란

React는 브라우저 이벤트를 직접 사용하는 것이 아니라, SyntheticEvent라는 합성 이벤트 객체로 감싸서 제공한다.

<input onClick={(e) => console.log(e)} />

위 예시에서 e는 브라우저의 MouseEvent가 아니라 React가 래핑한 SyntheticEvent이다.

 

왜 합성 이벤트를 사용하는가

1. 브라우저 간 호환성

• 이벤트 동작이 브라우저마다 다르므로 일관된 처리를 위해.

2. 성능 최적화

•  과거 React 16 이하에서는 이벤트 풀링 기법을 사용하여 이벤트 객체를 재사용했다. 이는 메모리 사용을 줄이고 GC(Garbage Collection) 부하를 줄이기 위한 목적이었다.
• 하지만 React 17부터는 이벤트 풀링이 중단되었다. 이제 이벤트 객체는 항상 새로 생성된다. 
• 그럼에도 불구하고 SyntheticEvent는 이벤트 위임과 함께 동작하면서 불필요한 리스너 등록을 줄여 성능 최적화에 기여한다. 

3. 이벤트 위임 (Event Delegation) : 이벤트를 루트에서 한번에 처리하여 렌더링 성능을 개선

• 리액트는 루트 DOM 노드에 하나의 이벤트 리스너만 등록한 뒤, 내부적으로 이벤트를 캡쳐해서 필요한 컴포넌트에 전달한다. 
• 이에 따라 수천 개의 DOM 요소 각각에 이벤트 핸들러를 붙이지 않아도 된다.
  결과적으로 렌더링 성능과 메모리 사용 효율이 크게 향상된다. 

 

nativeEvent의 역할

SyntheticEvent 내부에는 실제 브라우저 이벤트 객체를 참조하는 nativeEvent 속성이 있다.
isComposing처럼 브라우저에서만 존재하는 속성은 이 nativeEvent를 통해 접근해야 한다.

<input
  onKeyDown={(e) => {
    console.log('SyntheticEvent:', e);
    console.log('NativeEvent:', e.nativeEvent);
  }}
/>

 

 

ref

 

• MDN - KeyboardEvent.isComposing

• React 공식문서 - SyntheticEvent

• IME (Input Method Editor) 위키백과