JavaScript) OnKeyDown 에 바인딩된 함수가 두번 실행되는 이슈

프로젝트에서 최신검색어 기능을 구현하는도중

const [state,setState] = useState("")

const handleEnterPress = (e) =>{
  if(e.key === "Enter"){
  console.log(e.target.value
  }

return (
  <input
    onKeyUp={handleEnterPress}
  	onChange={(e)=>setState(e.target.value)}
  />
)

이렇게 엔터를 클릭하면 관련 함수를 실행하는 로직에서 함수가 두번 실행되는 이슈가 있었다.
비슷한 문제로 Strict모드가 있는데 이미 해제한 상태라서 그 문제는 아니였고, 다른 console.log들은 정상적으로 한번씩 실행되었다.

또 웃긴게 영어나 숫자를 입력하고 엔터키를 누르면 정상적으로 한번만 실행이되는데 한글만 두번씩 실행이 되었다. 또한 이전에 onKeyPress로 사용할때는 문제가 없었는데 onKeyPress가 deprecated 되고나서 onKeyUp으로 사용하려고 하니까 생긴 이슈였다.

문제의 원인을 찾아보니까 Chrome 브라우저에서 한글을 입력 할때 키이벤트의 KeyCode값을 출력해보면 229값으로 나오는 버그가 발생한다고 한다.
특정 환경에서 한글을 입력할때, IME(Input Method Editor) 가 이를 처리하고한글 입력 중 에는 IME의 composing 단계를 거친다. 이때 keyEvents 를 처리시 composing 이 완료되지 않았기에 229 코드가 나타난다는 것이다. 출처

이 버그때문에 함수가 두번동작하는것은 확실하지만, 정확한 원인은 알수가 없었다.

해결방법은 해당함수에 이렇게 분기처리를 해주면 해결된다.

	const handleEnterPress = (e) =>{
      	if (e.isComposing || e.keyCode === 229) return;
  		if(e.key === "Enter"){
  		console.log(e.target.value
  	}