isComposing 속성을 이용하여 입력 중 상태 감지하기

키보드 입력은 웹과 앱 개발에서 흔히 볼 수 있는 사용자 상호작용 중 하나입니다. 사용자가 입력을 완료했는지 아니면 여전히 작성 중인지를 판단하는 것은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. isComposing속성을 활용하면 사용자의 입력 상태를 감지할 수 있습니다.

 

isComposing 속성이란?

isComposing은 Event 객체의 속성 중 하나로, 사용자가 입력 과정 중인지 아닌지를 나타내는 불리언(Boolean) 값입니다. 이 속성은 주로 input 이벤트와 같이 키보드 입력을 다룰 때 유용하게 사용됩니다. 특히, IME(Input Method Editor)를 사용하여 글자를 조합하는 언어(예: 한국어, 일본어, 중국어 등)의 입력 처리에 매우 중요합니다.

 

import { useState } from 'react';
export default function Home() {
  const [isComposing, setIsComposing] = useState(false);
  const handleComposition = (event) => {
    if (event.type === 'compositionstart') {
      setIsComposing(true);
    } else if (event.type === 'compositionend') {
      setIsComposing(false);
    }
  };
  return (
    <div className="flex justify-center items-center h-screen">
      <input
        type="text"
        className={`p-2 text-lg border-2 ${isComposing ? 'border-blue-500' : 'border-gray-300'} transition-colors duration-300`}
        onCompositionStart={handleComposition}
        onCompositionEnd={handleComposition}
        placeholder="여기에 입력하세요..."
      />
    </div>
  );
}

 

코드에서는 useState 훅을 사용하여 isComposing 상태를 관리합니다. 사용자가 입력을 시작하면 (compositionstart 이벤트), isComposing 상태를 true로 설정하여 입력 필드의 테두리 색상이 파란색으로 변경됩니다. 입력이 완료되면 (compositionend 이벤트), isComposing 상태를 false로 변경하여 테두리 색상이 기본 회색으로 돌아갑니다.

이 예시는 입력 중인 상태를 시각적으로 강조하여 사용자 경험을 향상시키는 좋은 방법을 제시합니다.