[React] input box 한글 입력 한단어가 남아있다..!

IME와 React에서 발생하는 한글 입력 문제 해결

React에서 한글을 입력할 때 마지막 글자가 두 번 입력되는 문제가 발생하는 경우가 있습니다. 이는 IME(Input Method Editor)와 관련된 문제로, 한글과 같은 조합형 문자를 입력할 때 발생합니다. 이번 포스팅에서는 이 문제가 왜 발생하는지, 그리고 이를 해결하기 위한 React 예제 코드를 소개합니다.

---

문제 발생 원인

IME(Input Method Editor)는 한글과 같은 조합형 문자를 입력할 때 사용됩니다. IME는 입력 과정에서 조합 중인 문자를 임시 상태로 렌더링하고, 조합이 완료되면 최종 문자를 렌더링합니다.

React에서는 다음과 같은 이벤트가 조합형 문자 입력 과정에서 발생합니다:

1. onCompositionStart: IME 입력이 시작되었음을 나타냅니다.
2. onCompositionEnd: IME 입력이 끝났음을 나타냅니다.
3. onKeyDown: 키 입력 이벤트가 발생합니다.

이 문제는 React가 onKeyDown 이벤트와 IME 조합 완료(onCompositionEnd) 이벤트를 동시에 처리하려고 하면서 중복된 입력이 발생하는 데에서 기인합니다.

왜 한글에서만 문제가 발생할까?

• 영어는 IME를 사용하지 않으므로 조합 과정 없이 바로 렌더링됩니다.
• 한글은 조합형 문자이기 때문에 IME를 통해 조합 상태를 거친 후 최종 렌더링됩니다.
• 조합 상태와 최종 상태를 모두 렌더링하려고 시도하면서 중복 문제가 발생할 수 있습니다.

---

문제 해결 방법

React에서는 onCompositionStart, onCompositionEnd 이벤트를 사용하여 IME 상태를 관리함으로써 이 문제를 해결할 수 있습니다. IME 입력 중에는 onKeyDown 이벤트를 무시하고, 조합이 완료된 후에만 처리하도록 수정합니다.

---

예제 코드

아래는 한글 입력 시 마지막 글자가 중복되는 문제를 해결하기 위한 React 예제 코드입니다.

import React, { useState } from "react";

const ChatInput = () => {
    const [messages, setMessages] = useState([]);
    const [isComposing, setIsComposing] = useState(false); // IME 상태 관리

    const handleCompositionStart = () => {
        setIsComposing(true); // IME 입력 시작
    };

    const handleCompositionEnd = () => {
        setIsComposing(false); // IME 입력 종료
    };

    const handleKeyDown = (e) => {
        // IME 입력 중에는 처리하지 않음
        if (e.key === "Enter" && !isComposing) {
            const inputValue = e.target.value.trim();
            if (inputValue) {
                setMessages((prevMessages) => [...prevMessages, inputValue]);
                e.target.value = ""; // 입력 필드 초기화
            }
        }
    };

    return (
        <div>
            <div className="chat-messages">
                {messages.map((msg, index) => (
                    <p key={index}>{msg}</p>
                ))}
            </div>
            <input
                type="text"
                placeholder="메세지를 입력하세요"
                onCompositionStart={handleCompositionStart}
                onCompositionEnd={handleCompositionEnd}
                onKeyDown={handleKeyDown}
            />
        </div>
    );
};

export default ChatInput;

---

코드 설명

1. IME 상태 관리

   • onCompositionStart: IME 입력이 시작되면 isComposing 상태를 true로 변경합니다.
   • onCompositionEnd: IME 입력이 끝나면 isComposing 상태를 false로 변경합니다.

2. 키 입력 처리

   • onKeyDown에서 isComposing이 false인 경우에만 입력을 처리합니다.
   • IME 입력이 완료되기 전에는 onKeyDown 이벤트를 무시하여 중복 입력을 방지합니다.

3. 메세지 렌더링

   • 입력된 값은 messages 배열에 저장되며, UI에 렌더링됩니다.

---

요약

React에서 한글 입력 시 마지막 글자가 중복되는 문제는 IME 입력과 관련된 문제로, 입력 조합 상태를 고려하지 않고 onKeyDown 이벤트가 처리될 때 발생합니다. 이를 해결하기 위해 IME 상태를 관리하는 onCompositionStart와 onCompositionEnd를 활용하여 입력 이벤트를 조정하면 문제를 깔끔하게 해결할 수 있습니다.

이 방법을 적용하면 한글뿐만 아니라 다른 조합형 문자를 사용하는 언어에서도 동일한 문제가 발생하지 않도록 안정적인 입력 처리를 구현할 수 있습니다.

---