[React]컴포넌트에서 Esc 키 감지

React에서 Esc 키를 감지하는 방법입니다.

React에서 지원하는 ref와 EventListener을 사용하여 Esc 키를 감지합니다.

예전에 포스팅한 컴포넌트 외부 클릭과 동일한 방법이므로 이번 포스팅에서는 Class기반의 컴포넌트의 코드만 작성하였으며, 자세한 설명도 생략하였습니다.

입력 컨트롤에 Esc 키를 누를 경우 Esc Press 라는 문구가 console에 출력되는 코드를 작성했습니다.

---

Class기반의 컴포넌트로 구현

 

constructor

생성자에서 React.createRef()를 사용하여 escRef라는 ref를 생성하며, 이벤트 핸들러 함수를 바인딩합니다.

constructor(props) {
  super(props);
  this.escRef = React.createRef();
  this.escFunction = this.escFunction.bind(this);
}

 

componentDidMount

Detect 컴포넌트가 마운트 되면, document에 keyDown 이벤트 리스너를 추가합니다.

componentDidMount() {
  document.addEventListener("keydown", this.escFunction);
}

 

componentWillunmount

Detect 컴포넌트가 마운트 해제되면, document에서 이벤트 리스너를 제거합니다.

componentWillUnmount() {
  document.removeEventListener("keydown", this.escFunction);
}

 

escFunction

이벤트 핸들러 함수 escFunction를 작성합니다.

현재 이벤트가 동작되는 Element에서 esc키를 클릭했을 경우 console에 문구를 출력합니다.

escFunction(event) {
  if (this.escRef && this.escRef.current.contains(event.target)) {
    if (event.keyCode === 27) {
      console.log(`ESC Press`);
    }
  }
}

 

render

생성자에서 생성한 escRef와 imput Element를 연결합니다.

render() {
  return <input ref={this.escRef} />;
}

---

참고

https://stackoverflow.com/questions/37440408/how-to-detect-esc-key-press-in-react-and-how-to-handle-it

How to detect Esc Key Press in React and how to handle it