[ project error ] 해시태그 - 한글 입력 중 발생하는 React 키보드 이벤트 버그 해결하기

생각보다 간단하다고 했는데 ..ㅎㅎ 바로 bug가 생겨벼렸쥐머야?
영문으로 쳤을때는 전혀 문제가 없는데, 한글로치면 끝자리가 input에 남아버린다던가, 해시태그가 끝자리가 입력이되면서 두번해시태그가 된다..😭

하지만, 방법은 항상있쥐 ✍️💻

한글 입력 시 생기는 버그에 대해 살펴보고, 이를 해결하기 위한 방법에 대해 알아보자. 😅

문제 상황:

한글 입력 중에는 영문 입력과는 다르게 버그가 발생합니다. 특히, 끝자리가 input에 남거나 해시태그가 두 번 입력되는 등의 문제가 발생합니다. 이를 해결하기 위해서는 키보드 이벤트를 올바르게 처리해야 합니다.

키보드 이벤트 사용하기:

React에서는 키보드 이벤트를 onKeyDown 등의 속성을 사용하여 다룰 수 있습니다. 가장 대표적으로 사용되는 것은 KeyboardEvent.isComposing입니다. 이 속성은 현재 키 이벤트가 입력 중인 문자나 문자열을 구성 중인지 여부를 나타냅니다.

예제 코드:

const handleKeyDown = (e) => {
    // isComposing이 true이면 아직 완료되지 않은 조합 입력 중임을 나타냅니다.
    if (e.nativeEvent.isComposing) {
        return;
    }

    // 특별한 키가 입력되었을 때의 처리
    if (e.key === ' ' || (e.key === 'Enter' && e.nativeEvent.isComposing === false)) {
        // 여기에 원하는 로직 추가
    }
};

해결 방법:

한글 입력 중 발생하는 문제를 해결하려면, isComposing 속성을 활용하여 조합 입력이 종료된 후에만 원하는 로직을 실행하도록 처리해야 합니다. 이렇게 하면 중복 이벤트 실행 문제를 해결할 수 있습니다. 😊🔎

• KeyboardEvent.isComposing은 JavaScript의 키보드 이벤트 객체에서 사용되는 속성으로, 현재 키 이벤트가 사용자의 입력 중인 문자나 문자열을 구성 중인지 여부를 나타냄.

---

간단히 말하면, isComposing이 true인 경우에는 사용자가 아직 완료되지 않은 입력을 하고 있다는 것을 나타냄.
예를 들어) 한글이나 일본어와 같은 다중 글자를 조합해 입력하는 도중에 isComposing은 true로 설정되며, 입력이 완료되면 false로 변경됨.

키보드 이벤트에 대한 처리 중에 isComposing을 사용하면, 사용자가 아직 입력 중인지 여부를 확인할 수 있어서 조합 입력에 대한 특별한 처리를 할 때 유용합니다.

document.addEventListener('keydown', function(event) {
    // event.isComposing이 true이면 아직 완료되지 않은 조합 입력 중임을 나타냅니다.
    if (event.isComposing) {
        console.log('조합 입력 중...');
    } else {
        // event.key는 실제 눌린 키의 값을 나타냅니다.
        console.log('키 눌림:', event.key);

        // 예를 들어, 'Enter' 키가 눌렸을 때 특별한 동작을 수행할 수 있습니다.
        if (event.key === 'Enter') {
            console.log('Enter 키가 눌렸습니다.');
        }
    }
});

---

한글 입력에서 발생하는 KeyboardEvent.isComposing 오류의 이유

해결 방법:

isComposing이 true일 때만 원하는 로직을 수행하도록 코드를 작성합니다.
Composition Session이 종료된 후에는 false가 되므로, 중복 이벤트 실행 문제를 방지할 수 있습니다.

const handleKeyDown = (e) => {
    if (e.nativeEvent.isComposing) {
        // 한글 입력 중이므로 로직을 수행하지 않음
        return;
    }

    // Composition Session이 종료된 후에만 로직을 수행
    // 여기에 원하는 동작 추가
};