02832025년 8월 28일

[React] React에서 한글 입력(IME) 깨짐 문제 해결하기

프론트엔드 개발을 하다 보면 예상치 못한 버그를 마주하게 된다. 이번 글에서는 React Input에서 한글 입력이 "서울"→ "ㅅㅓㅇㅜㄹ"처럼 분해되는 IME(Input Method Editor) 문제와 이를 어떻게 해결했는지에 대해 기록하고자 한다.

문제 상황

React에서 value와 onChange를 사용하는 제어 컴포넌트(Controlled Component) 패턴은 흔히 쓰이는 방식이었다.

하지만 아래처럼 작성했을 때 한글 입력에서 문제가 발생했다.

code

// 기존 코드 (문제 발생)
<input
  type="text"
  className="w-full"
  value={quizAnswer}  // 제어 컴포넌트
  onChange={(e) => setQuizAnswer(e.target.value)}  // 매번 리렌더링
/>

이 코드에서 발생한 문제는 다음과 같았다.

제어 컴포넌트React가 입력값을 완전히 제어하고 있었다.
즉시 상태 업데이트onChange가 발생할 때마다 상태를 업데이트하고, 컴포넌트가 즉시 리렌더링되고 있었다.
IME 조합 중단한글 입력은 초성/중성/종성이 결합되어 한 글자가 만들어지는 과정(예: ㅅ + ㅓ = 서)을 거치는데, 매번 리렌더링이 발생하면서 이 조합이 끊어지고 있었다.

결과적으로 "서울대"를 입력하면 "서ㄹㅐ"처럼 깨지는 현상이 나타났다.

해결 방법

해결의 핵심은 조합 중에는 React가 간섭하지 않도록 하는 것이었다.

이를 위해 비제어(Uncontrolled) 방식을 사용하고, 특정 시점에만 React 상태를 업데이트하도록 변경했다.

code

// 수정된 코드 (문제 해결)
<input
  type="text"
  className="w-full"
  defaultValue={quizAnswer}  // 비제어 컴포넌트
  onBlur={(e) => setQuizAnswer(e.target.value)}  // 포커스 아웃 시 업데이트
  onKeyDown={(e) => {
    if (e.key === 'Enter') {
      setQuizAnswer(e.currentTarget.value);  // Enter 시 업데이트
    }
  }}
/>

해결 포인트

비제어 컴포넌트defaultValue를 사용하여 브라우저의 기본 IME 조합 과정을 보장했다.
지연된 상태 업데이트onBlur 또는 Enter 입력 시점에만 React 상태를 갱신하도록 했다.
IME 안정성 확보조합 중간에는 리렌더링이 발생하지 않아 "서울대"가 정상적으로 입력되었다.

핵심 비교

구분	기존 코드 (문제)	수정된 코드 (해결)
컴포넌트 타입	제어 컴포넌트 (value)	비제어 컴포넌트 (defaultValue)
상태 업데이트	매 타이핑마다 (onChange)	특정 시점만 (onBlur, Enter)
리렌더링	매번 발생	필요할 때만 발생
IME 조합	중단됨	자연스럽게 유지됨

한글 입력 과정 비교

1) 기존 코드

TypeScript

'ㅅ' → onChange → 리렌더링 → IME 리셋
'ㅓ' → onChange → 리렌더링 → IME 리셋
'ㅇ' → onChange → 리렌더링 → IME 리셋
...

2) 수정된 코드

TypeScript

'ㅅ' + 'ㅓ' → '서' (브라우저 관리)
'서' + 'ㅇ' + 'ㅜ' + 'ㄹ' → '서울'
'서울' + 'ㄷ' + 'ㅐ' → '서울대'
포커스 아웃 또는 Enter → React 상태 업데이트

마무리

React에서 제어 컴포넌트를 사용할 경우 한글 IME 입력이 깨지는 문제가 발생할 수 있다.

이 문제는 조합 중에는 React 상태 업데이트를 지연시키고, 조합이 끝난 뒤에만 React와 동기화하는 방식으로 해결할 수 있었다.

이번 경험을 통해 입력 폼을 만들 때는 단순히 제어/비제어 여부만 고려하는 것이 아니라, 언어별 입력 특성(특히 한글 IME)까지 고려해야 한다는 점을 배웠다.

앞으로 Input 컴포넌트를 작성할 때는 이러한 부분을 반드시 염두에 두어야 할 것이다.

최근 글