[React] onKeyUp, onKeyDown, onKeyPress 차이

차이점

onKeyUp, onKeyDown

키를 누르고 떼는 동작 자체에 반응한다.

• 인식 가능 : 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter
• 인식 불가능 : 한/영, 한자, Print Screen
• onKeyUp, onKeyDwon는 keycode를 사용하여 특수키를 제외한 모든 키를 인식한다.

 

onKeyPress

실제로 문자가 입력되었을 때 반응한다.

• 인식 가능 : 문자, 숫자
• 인식 불가능 : Ctrl, Shift, Tab, Alt, F1~F12, Scroll Lock, Pause, Enter, 한/영, Print Screen
• onKeyPress는 ASCII 값으로 사용되서 shift, ctrl 같은 키는 인식하지 못한다.

 

keyCode

// 예시 code
// enter일 경우(keycode=13이다) 성공 출력

export default function test() {
  const handleEnter = (e) => {
    if (keyword && e.keyCode === 13) {
        console.log('성공!')
    };
  }

  return(
    <div>
      <input onKeyDown={handleEnter} />
    </div>
  )
}

위 예시처럼 특정 키를 눌렀을 때 함수가 실행되도록 설계가 가능하다.

 

공식문서를 참조하여 필요한 key code를 사용할 수 있다.

MDN -  KeyboardEvent.keyCode
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

 

동작순서

onKeyDown → onKeyPress → onChange → onKeyUp 의 순서대로 작동된다. 키가 눌리고 떨어지는 과정을 순서대로 생각해보면 이해하기 쉽다.

 

주의사항

keydown, keyup의 경우 Cnt, Alt 와 함께 사용해야 하는 키는 적용하기 어려우니 주의하자.

(방법이 아예 없는건 아니다)