[js, Next.js] <input> 한글 입력 후 엔터 시 중복 이벤트 발생 문제

JavaScript, Next.js에서 <input> 한글 입력 후 엔터 시 중복 이벤트 발생 문제가 생기는 이유

js혹은 Next.js의 <input> 태그에서 숫자 혹은 알파벳 입력 후 엔터 시 이벤트 발생 순서 (onKeyDown, onKeyPress, onKeyUp)

 - 숫자 혹은 알파벳 입력시 발생 순서: keydown => keypress => keyup

 - 엔터 입력시 이벤트 발생 순서: keydown => keypress => keyup

 

* 한글 입력시

한글 입력시 발생 순서: keydown => keyup

엔터 입력시 이벤트 발생 순서: keydown => keyup => keydown => keypress => keyup

 

빨간색 글씨 keyup과 keydown에서 isComposing속성이 true(keyCode = 229)가 true로 된다.

이는 한글이 조합되는 과정(Composing)에서 발생하는 키이다.

한글 입력 시 글자 아래 '_'가 표시되는 경우가 compose과정이다.

이 때문에 keydown에서 엔터키를 처리할 때 이벤트가 중복해서 발생하게 된다.

 

 

---

 

한글 중복 입력 해결방법

 

1. 한글 입력 후 엔터 키 처리 시 keypress 이벤트를 사용하면 중복없이 처리 가능하다.

예제코드

const preventEnter = (e: React.KeyboardEvent) => {
  if (e.key === "Enter") e.preventDefault();
};

const tagKeyPressHandler = (e: React.KeyboardEvent) => {
    preventEnter(e);
    if (e.key === "Enter") handleEvent(e);
};

<input
   ...
   onKeyPress={(e: React.KeyboardEvent) =>
      tagKeyPressHandler(e)
   }
      ...
...>

 

2. keyDown에서 엔터 키 처리를 한 번 더 preventDefault()하면 된다.

예제코드

const preventEnter = (e: React.KeyboardEvent) => {
  if (e.key === "Enter") e.preventDefault();
};

const tagKeyPressHandler = (e: React.KeyboardEvent) => {
    preventEnter(e);
    if (e.key === "Enter") handleEvent(e);
};
  

<input
   ...
   onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
      preventEnter(e)
   }
   onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) =>
      tagKeyPressHandler(e)
   }
   ...
...>

 

3. isComposing속성이 false인 상태에서만 처리하도록 하면 중복없이 처리가능하다.

예제코드

target.addEventListenr("keydown", (e) => {
   if(!e.isComposing) {
   	handleEvent(e);
   }
});

 

 

* 참고

e.preventDefault() 사용이유

엔터키를 누르면 브라우저 기본 이벤트가 발생해 submit 되는데 이를 방지하는 방법이다.

key 이벤트를 만들고 엔터가 발생시 event.preventDefault()를 코드에 추가한다.

 

Event.preventDefault()

Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.