[javascript] event.keyCode 기초 정리

보통 우리는 키보드를 javascript로 핸들링 할때, keyCode를 사용해서 적용 한다. 왜냐하면 구글링을 하다보면 KeyCode에 관한 내용들이 많기 때문이다. 하지만 아래의 문서를 보면 Deprecated 되었다고 나와있는 것을 알 수 있다. 정단히 정리하면, 웹 표준에서 제거가 되었다. 호환성 목적으로 사용하기는 하지만, 사용하지 않는것을 추천한다. 

 

 

 

 

1. keyCode 

그래도 대부분 사용하지 않더라도 대략적인 사용법은 아래와 같다. 요즘 리액트를 많이 쓰니 리액트 기준으로 관련 로직을 보면 아래와 같다. 아래와 같이 간단하게 사용가능하다. onKeyDown 리스너를 통해서 키보드를 누르는 event를 받는다. 그리고 받은 이벤트에 event.keyCode를 보면 숫자가 적혀있는 것을 알 수 있다. 그 숫자가 바로 방향키에 따라 다른 숫자가 나오고, 그 나온 숫자에 따라 로직을 작성해 주면 된다. 아래의 예를 간단히 보면, 위 방향키를 누르면, event.keyCode가 38로 나타난다는 것을 알 수 있다.

 

const KeyCodeTest = () => {
  const handleKeyDown = (
    event
  ) => {
    switch (event.keyCode) {
      case 38:
      	// 위 방향키
        break;
      case 39:
    	// 오른쪽 방향키
        break;
      case 40:
        // 아래 방향키
        break;
      case 37:
        // 왼쪽 방향키
        break;
      }
    };
    return (
        <button onKeyDown={handleKeyDown}>TEST</button>
    )
}

export default KeyCodeTest

 

간단하게 필요한 내용한 적어서 react로 예시를 만들어 보았다. 관련 내용은 아래의 주소를 참고하자.

 

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

KeyboardEvent.keyCode - Web APIs | MDN

 

 

2. event.key

event.keyCode를 사용 못하면 무엇을 사용해야하나!!!! 바로 event.key이다. 관련 javascript 예시는 아래와 같다.

 

window.addEventListener("keydown", (event) => {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "Down": // IE/Edge specific value
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "Left": // IE/Edge specific value
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "Right": // IE/Edge specific value
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Esc": // IE/Edge specific value
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

 

사실 event를 불러서 사용하면 된다. 가장 큰 차이는 keyCode는 숫자고, key는 문자이다. 이제 관련 내용을 통해 코딩을 시작을 해보자.