keydown, keyup 이벤트의 key 프로퍼티 (한글 입력 시 차이)

문자 키를 눌렀을 때만 발생하던 keypress 이벤트가 deprecated 됐기 때문에 keydown 이나 keyup 이벤트를 통해 문자 입력 이벤트를 감지해야 한다.

이때 keydown과 keyup 사이에는 차이점이 조금 존재하기 때문에 쓰임새에 맞춰 적절한 이벤트를 선택하는 것이 필요하다.

 

 

keydown

• 키를 눌렀을 때 발생
• 모든 키
• 문자, 숫자, 특수 문자, enter 키를 눌렀을 때는 연속적으로 발생
• 그 외의 키는 한 번만 발생

 

keyup

• 누르고 있던 키를 놓았을 때 한 번만 발생
• 모든 키

 

목적

검색 입력 값만 따로 추출

 

이때 KeyboardEvent의 key 프로퍼티를 활용하고자 했다.

KeyboardEvent: key property - Web APIs | MDN

 

대체로 keyDown과 keyUp의 결과는 유사했다.

영문, 숫자, 특수문자 입력 시

 

 

차이점

그러나 한글 입력 시에는 차이가 있다.

한글 입력 시

 

keyDown은 Process를 반환하고, keyUp은 Process와 해당 자리의 영문을 두번 반환한다.

 

 

Process

• IME(Input Method Editor)가 아직 글자의 조합 상태를 완료하지 않았기 때문
• 글자가 조합 중이라는 의미

 

영문

• IME가 글자 조합을 마치고 최종적으로 완성된 한글 자모에 해당하는 원래의 키 값 (영문 자판 기준)을 반환함
• 기본적으로 한글 자모가 영문 키와 매핑되어 있기 때문

 

➡️ IME가 입력을 처리하는 방법이 keydown과 keyup 이벤트에서 차이를 만든다.

• keydown → 키를 누르는 순간 발생한다. 고로 입력 중에 IME가 문자를 조합하는 과정을 시작한다. 그렇기 때문에 “조합 중”을 의미하는 Process가 반환된다.
• keyup → 키를 놓았을 때 발생한다. 이때는 키를 누르는 동안 조합된 자모가 완료되어 하나의 글자가 완성되었을 가능성이 크다.

 

 

코드 구현

const getCompanies = useDebounce((val) => {
  if (val.key.length !== 1 && val.key !== 'Backspace') return;
  getIsurOrgNm({ isuOrg: selectBoxList.value.isuOrg.value });
}, 200);