[React] 키보드 이벤트 처리

 

[React] 키보드 이벤트 처리

React에서 키보드 이벤트 처리하는 방법을 알아보도록 하겠습니다.

(JavaScript도 방법은 동일합니다.)

input element를 사용하여 키보드 이벤트 처리하는 방법을 알아보도록 하겠습니다.

이번 게시글은 제가 봐도 정말 못 적은 것 같습니다.

간단정리와 코드만 작성을 보시는 것을 추천 드립니다.

급하신 분들은 제일 밑에 코드로 정리해두었으니 복붙해서 사용하시면 됩니다.

 

키보드 이벤트 처리하기

웹 개발을 하다보면 키보드 이벤트 처리해야하는 경우가 있습니다.

대표적으로 사용자가 Enter를 입력했을 때 검색이 자동으로 되는 기능이 있습니다.

이러한 기능을 개발할 때 사용자가 Enter를 입력하였는 지 알아야 합니다.

이때 사용하는 것이 키보드 이벤트 처리입니다.

간단하게 키보드 단일 이벤트 처리하는 방법을 알아보겠습니다.

 

◆ 키보드 단일 이벤트 처리

input elelemt에 onKeyDown 핸들러를 사용하시면 됩니다.

아래 코드를 확인해봅시다.

<input onKeyDown={e => { console.log("# event : ", e); }} />

위 코드 input element에 Enter를 입력하면 아래 결과가 나옵니다.

 

결과를 보면 알 수 있듯이 "key"라는 속성에 "Enter" 값이 들어있습니다.

즉, e.key를 사용하면 어떠한 키보드 키를 입력했는 지 알 수 있습니다.

 

그럼 crtl을 눌러보면 어떤 결과가 나올까요?

 

위 결과를 보면 "key" 속성에 "Control" 값이 있는 것을 알 수 있습니다.

그러나 조금 더 자세히 보면 "crtlKey" 속성에 true 값이 들어 있습니다.

따라서 crtl key가 입력되었는 지 알고 싶으면 crtlKey가 true이거나 key 속성이 Control 인지 확인하면 됩니다.

 

마지막으로 shift를 눌러보겠습니다.

shift도 control과 마찬가지로 "key" 속성에는 "Shift" 값이 있습니다.

그리고 "shiftKey" 속성에 true 값이 들어 있습니다.

 

상황에 맞게 key 속성을 사용하셔도 되고 shiftKey, crtlKey 를 사용하셔도 됩니다.

추가로 altKey도 동일하게 사용하셔도 됩니다.

 

macbook을 사용하는 경우 command key 이벤트도 crtlKey와 동일하게 적용하고 싶을 수 있습니다.

command key를 입력한 결과는 아래와 같습니다.

"metaKey" 속성에 true 값이 들어 있는 것을 확인할 수 있습니다.

즉, command key event를 사용하실 때는 e.metaKey를 이용하시면 됩니다.

 

◆ 키보드 다중 이벤트 처리

보통 에디터에서 crtl+B를 선택하게 되면 선택된 텍스트가 볼드처리 됩니다.

이러한 작업을 하기 위해서는 이벤트 2개 이상이 입력이 된 것을 감지 해야합니다.

사실 이것은 매우 간단한 작업입니다.

 

해당 input element에서 crtl + Enter를 입력해봅시다.

위와 같이 "key"는 "Enter", "crtlKey"는 true 값이 있는 것을 확인할 수 있습니다.

즉 if 문 조건식에 && 연산자를 이용하여 사용하면 됩니다.

자세한 코드는 아래 코드만 작성을 확인해봅시다.

 

간단정리

React에서 키보드 이벤트 처리하는 방법은 매우 간단합니다.

onKeyDown의 event 객체를 확인한 후 "key" 속성의 값을 보고 사용하시면 됩니다.

crtl, alt, shift 등 특수한 key는 boolean 값으로 따로 확인할 수 있으니 상황에 맞게 사용하시면 됩니다.

아래는 간단하게 복붙할 수 있도록 코드만 작성하였습니다.

 

코드만 작성

- Enter key 이벤트

<input
  onKeyDown={e => {
    if (e.key === "Enter") {
    }
  }}
/>;

- Shift key 이벤트

<input
  onKeyDown={e => {
    if (e.shiftKey) {
    }
  }}
/>;

- Alt key 이벤트

<input
  onKeyDown={e => {
    if (e.altKey) {
    }
  }}
/>;

- Crtl key 이벤트

<input
  onKeyDown={e => {
    if (e.ctrlKey) {
    }
  }}
/>;

- Command key 이벤트

<input
  onKeyDown={e => {
    if (e.metaKey) {
    }
  }}
/>;

- Backspace key 이벤트

<input
  onKeyDown={e => {
    if (e.code === "Backspace") {
    }
  }}
/>;

- Crtl(Command) + Enter key 이벤트

<input
  onKeyDown={e => {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
    }
  }}
/>;

- Crtl(Command) + B key 이벤트

<input
  onKeyDown={e => {
    if ((e.metaKey || e.ctrlKey) && e.key === "KeyB") {
    }
  }}
/>;

- Crtl(Command) + Shift + B key 이벤트

<input
  onKeyDown={e => {
    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "KeyB") {
    }
  }}
/>;​