텍스트 입력 시, 한글 마지막 글자가 추가되는 문제

키보드 이벤트의 isComposing

키워드를 입력받을 때, 한글을 입력하면 검색어의 마지막 글자가 딸려오는 문제가 발생했다. 영어를 입력했을 때에는 문제가 되지 않지만, 한글을 입력했을 때에만 문제가 발생했다.

 

 

한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자이고, 영어는 조합문자가 아니다.

따라서 한글을 입력할 때 이 글자가 조합중인건지, 조합이 끝난 상태인지 파악하기 어렵기 때문에, Enter키를 입력하면 이벤트가 2번 발생하게 되며, 영어를 입력할 때에는 발생하지 않고, 한글을 입력할 때에만 발생하게 된다.

 

 

📌 또한 이 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다.

 

 

키보드 이벤트에는 isComposing이라는 입력문자가 조합문자인지 아닌지를 boolean값으로 반환하는 프로퍼티가 있는데,

React에서는 isComposing 프로퍼티를 제공하지 않기 때문에 nativeEvent의

e.nativeEvent.isComposing 을 사용해야한다.

// 키워드 추가
  const handlePushKeyword = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      if (!e.nativeEvent.isComposing) { 
        setKeywords([...keywords, search.trim()]); // 입력된 단어를 키워드 배열에 추가
        setSearch(''); // 검색어를 초기화
      }
    }
  };

위와 같이 코드를 변경하였고, 문제가 해결되는 것을 확인할 수 있었다.

 

 

참고

https://velog.io/@o1_choi/isComposing

키보드 이벤트의 isComposing (Feat: React )

https://always-hyeppy.tistory.com/36