[React, JavaScript] input 한글로 작성하는 경우 두 번 입력되는 현상

 

문제

리액트로 투두리스트 프로젝트를 하고 있는데 위와 같이 한글로 입력하는 경우에는 입력한 문자열 중 마지막 문자가 한 번 더 등록되는 문제가 발생했다

        <input
          className={styles.input}
          type="text"
          id="todo"
          name="todo"
          placeholder="input"
          onChange={textHandler}
          value={input}
          onKeyDown={(e) => {
            enterkeyEvent(e);
          }}
        />

 

 

원인

한글, 한자처럼 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자를 계산하거나 조합하여 입력해 주는 시스템 소프트웨어인

입력 방식 편집기(input method editor, IME) 자체 오류로 비단 한글뿐만 아니라 일본어, 중국어도 텍스트 입력과정에서 두 번 입력되는 오류가 생긴다고 한다.

 

 

해결방법 1) onKeyDown -> onKeyPress

onKeyPress 이벤트의 경우 문자가 실제로 입력됐을 때 반응한다고 한다. 그래서 두 번씩 입력되는 오류를 해결할 수 있다. input 태그 내에 onKeyDown을 onKeyPress로 바꿔주니 해결되었다. 그러나 onKeyPress이벤트가 더이상 지원되지 않을 예정이라는 이유로 해당 방법은 추천되지 않는다고 한다. 

<input
          className={styles.input}
          type="text"
          id="todo"
          name="todo"
          placeholder="input"
          onChange={textHandler}
          value={input}
          onKeyPress={(e) => {
            enterkeyEvent(e);
          }}
        />

 

 

 

해결방법 2) event.nativeEvent.isComposing == false

이벤트가 두 번 발생하는 건 제어할 수 없고 이벤트가 두 번 발생할 때 isComposing의 반환 값이 True인 경우는 조합중인 경우이고 조합이 다 끝나면 False값이 반환된다. 그러므로 조합이 다 끝난다음에 input이 초기화되기를 원하므로event.nativeEvent.isComposing == false 로 조건을 걸어주면 해결된다.

 

  function enterkeyEvent(e) {
    if (e.key == "Enter" && e.nativeEvent.isComposing == false) {
      e.preventDefault();
      setIntput("");
      handleAdd(e);
    }
  }

 

 

 

 

 

 

< 참조 >

- by푸고배 (2022.05.02.), [JavaScript] 한글 키보드 입력 시 이벤트가 두 번 호출되는 경우 [Website] 검색 경로 - https://doqtqu.tistory.com/344

- 밀크티에 환장하는 개발자, (2022.11.16), MMZ 일지 19. 한글 입력할 때 2번 입력이 되는 경우 in React, Typescript

[Website] 검색 경로 - https://velog.io/@euji42/solved-%ED%95%9C%EA%B8%80-%EC%9E%85%EB%A0%A5%EC%8B%9C-2%EB%B2%88-%EC%9E%85%EB%A0%A5%EC%9D%B4-%EB%90%98%EB%8A%94-%EA%B2%BD%EC%9A%B0