shortcut 만들기

react에서 keyboard shorcut 만들기

 

event hook을 이용해서 해당 component가 mount 됐을 때 event listener를 생성하고 unmount 됐을 때 제거한다.

 

 onClickArrow = (e) => {
    const keyCode = e.keyCode;

    if (keyCode === 39) {
      // right arrow
      const nextBtn = this.nextButtonRef.current;
      if (nextBtn && !nextBtn.props.disabled) {
        nextBtn.onClick();
      }
    } else if (keyCode == 37) {
      // left arrow
      const prevBtn = this.prevButtonRef.current;
      if (prevBtn && !prevBtn.props.disabled) {
        prevBtn.onClick();
      }
    }
  };

  componentDidMount() {
    document.addEventListener('keydown', this.onClickArrow);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.onClickArrow);
  }