[React] MacOS onKeyDown 이벤트 시 한글 깨짐 문제 해결방법

💢 맥에서 한글로 text input 입력 후 이벤트를 trigger했을 때

      단어가 제대로 인식이 안 되고 깨지는 문제

 

문제가 일어났던 기능

▪에러내용 : 

세 명의 팀원 중 두 명은 윈도우 환경에서 개발 중이고, 한 명은 맥북을 쓰고 있다.

input란에 키워드를 입력하고 enter키를 누르면 키워드태그가 생성되는 기능을 구현했는데

이상한 문제가 발생했다.

윈도우를 쓰는 사람들 기준에서는 아무 문제 없이 태그가 정상적으로 등록됐는데,

똑같은 코드인데도 불구하고 이상하게 맥북에서는 기능이 정상적으로 수행이 안 되는 것이다.

예를 들어 사과, 토마토, 복숭아를 입력한다고 치면

윈도우에서는 위의 gif처럼 키워드 태그 3개가 각각 예쁘게 잘 생성됐는데,

맥북에서는 '사과', '과', '토마토', '토', '복숭아', '아'

이렇게 총 6개의 태그가 생성되는 문제가 발생했다.

도대체 왜인지는 모르겠지만 단어의 마지막 음절이 또 하나의 단어로 인식되는 것 같았다.

(영어를 입력하면 문제 없는걸 보아하니 아마 맥os에서 한글을 처리하는 방식 때문인 듯 했다)

 

▪원인 : onKeyDown 사용

 

▪해결방법: onKeyPress 사용

const handleKeyPress = e => {
    let userInput = e.target.value;
    if (e.key === 'Enter') {
      // enter key down triggered event
    }
  };
  

<BoxInputText onKeyPress={handleKeyPress} />

 

 

참고자료

https://www.codegrepper.com/code-examples/javascript/event.keycode+not+working+in+react