Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Archives
Today
Total
관리 메뉴

성빈

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

React

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

성빈나 2024. 3. 12. 15:20

키보드 이벤트의 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 )

자동완성 기능을 구현하던 중 추천 키워드로 이동 시 기존 입력한 검색어의 마지막 글자가 포함되어 출력되는 문제**가 발생했다. 테스트를 해보니 크롬 브라우저에서 한글을 사용하는 경우만

velog.io

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

'React' 카테고리의 다른 글

fetch와 axios  (1) 2024.07.23
텍스트 편집기 직접 만들기  (0) 2024.03.21
axios와 fetch  (1) 2024.02.14
dependencies와 devDependencies  (2) 2024.02.14
리액트 상태 관리  (0) 2023.11.05