.png&blockId=954e8835-5b14-4d25-b891-9bbc4a70c96d&width=3600)
한글 입력 시 React의 keydown 이벤트가 두 번 호출되는 문제는 주로 한글의 자음과 모음이 합성되는 과정에서 발생합니다. 이 현상은 입력 방식 편집기(IMD)의 특성으로 인해 발생하며, 이를 해결하기 위한 여러 방법이 있습니다.
문제원인
한글 입력 시, 사용자가 자음과 모음을 입력하면 브라우저는 각 입력에 대해 keydown 이벤트를 발생시키고, 최종적으로 글자가 완성되면 onCompositionEnd 이벤트가 호출됩니다. 이 과정에서 keydown 이벤트가 중복 호출되어 원치 않는 동작을 유발할 수 있습니다
해결방법
1. 커스텀 훅 사용
useKeyComposing이라는 커스텀 훅을 만들어 한글 입력 중에는 keydown 이벤트를 차단할 수 있습니다. 이 훅은 onCompositionStart와 onCompositionEnd 이벤트를 활용하여 현재 한글 입력 상태를 감지합니다.
import { useState } from 'react';
const useKeyComposing = () => {
const [isComposing, setIsComposing] = useState(false);
const keyComposingEvents = {
onCompositionStart: () => setIsComposing(true),
onCompositionEnd: () => setIsComposing(false),
};
return { isComposing, keyComposingEvents };
};
export default useKeyComposing;
JavaScript
복사
2. 네이티브 이벤트 활용
이벤트 핸들러 내에서 event.nativeEvent.isComposing속성을 확인하여 한글 조합 중인지 여부를 판단할 수 있습니다. 조합 중일 경우 해당 이벤트를 무시하도록 조건을 추가합니다.
function handleKeyDown(e) {
if (e.nativeEvent.isComposing) return;
// 나머지 처리 로직
}
JavaScript
복사
3. onKeyPress 사용
onKeyDown 대신 onKeyPress 이벤트를 사용하는 방법도 있으나, 이는 더 이상 권장되지 않습니다. onKeyPress는 문자가 실제로 입력될 때만 반응하기 때문에 중복 호출 문제를 피할 수 있지만, 이 이벤트는 앞으로 지원되지 않을 예정입니다