[React] 단축키 설정하기

단축키가 지정된 화면

velog에서 글을 보다가, until이라는 블로그를 보았다. 훑어보는데, 해당 블로그의 검색 기능에 ctrl + k를 누르면 검색 기능이 모달처럼 펼쳐지는 것을 보고 해당 기능을 검색하게 되었다. 그러다가 알게 된 사실을 글로 작성하고자 한다.

단축키 라이브러리 사용하기

react에서 키 이벤트를 사용해서 구현해도 되는데, 일반적으로 단축키 라이브러리가 잘 구현되어 있기 때문에 그것을 많이 활용한다. 그래서 찾아보니 일반적으로 두 개의 라이브러리가 활성화가 많이 되어 있었다.

npm trends

위의 사진은 npm trends에 들어가서 두 라이브러리를 비교한 사진이다. 첫 번째로 version과 updated를 비교해보았다. 이슈가 적음에도 react-hotkeys-hook이 버전이 높고 업데이트를 자주 한 흔적이 보였다. 두 번째로 공식 문서등을 방문해서 어떤 것이 적용하기 더 쉬운지 확인하였다. 그랬더니 react-hotkeys-hook이 비교적 쉬운 예제로 적용하기 쉬워 보여 이를 가지고 적용하고자 한다.

공식문서 따라하기

https://react-hotkeys-hook.vercel.app/docs/intro

Quick Start | React Hotkeys Hook

위의 사이트는 공식 문서 사이트이다. 이를 들어가서 따라해줬다.

1) react-hotkeys-hook 설치하기

npm i react-hotkeys-hook --save

react-hotkeys-hook를 사용할려면 react의 버전이 16.8이상이 되어야 하므로, 이가 충족되는지 확인해준다. 확인이 되었다면 위를 따라쳐서 설치해준다.

2) react-hotkeys-hook 적용하기

import { useHotkeys } from 'react-hotkeys-hook';

function MyComponent() {
  const [count, setCount] = useState(0);

  useHotkeys('a', () => setCount(count => count + 1));

  return (
    <span>Pressed 'a' key {count} times.</span>
  );
}

a를 클릭하면 count가 점점 증가하는 것을 확인할 수 있다.

react-hotkeys-hook 활용하기

내 경우 ctrl + k를 누르면 모달 창이 띄워지게끔 하고자 하였다. 근데 여기서 주의할 것은 각각의 브라우저마다 적용되는 기본 단축키가 있다. 그래서 브라우저에서 쓰이고 있던 단축키를 앱에서 적용해버리면 브라우저에서 적용이 안되기 때문에 피해서 적용해야 한다.
https://support.google.com/chrome/answer/157179?hl=ko&co=GENIE.Platform%3DDesktop#zippy=%2C%ED%83%AD-%EB%B0%8F-%EC%B0%BD-%EB%8B%A8%EC%B6%95%ED%82%A4

Chrome 단축키 - 컴퓨터 - Google Chrome 고객센터

그런데 이 기본 단축키를 적용하고자 한다면 아래와 같이 따라하면 된다.

1) 모달 창 만들기

import React from 'react';
import '@/app/globals.css'; // Import CSS for styling

const Modal = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    return (
        <div className="modal" onClick={onClose}>
            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
                <span className="close" onClick={onClose}>&times;</span>
                <h2>Modal Header</h2>
                <p>This is a simple modal example!</p>
            </div>
        </div>
    );
};

export default Modal;

.modal {
    display: flex; /* Use flexbox for centering */
    align-items: center;
    justify-content: center;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15px;
  /* Center the modal */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

위와 같이 modal component를 만들고, 해당 모달의 css가 적용되도록 해준다.

2) 메인 페이지에 모달 적용하기

import { useHotkeys } from 'react-hotkeys-hook';
import Modal from '@/components/chart/Modal';

단축키가 적용될 수 있도록, useHotkeys를 적용해준다. 그리고 만들어놓은 modal을 가져와 메인 페이지에 적용해준다.

function MyComponent() {
  const [isModalOpen, setModalOpen] = useState(false);
  useHotkeys('ctrl+k', (event) => {
        event.preventDefault(); 
        setModalOpen(!isModalOpen); 
    });
  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);

  return (
    <div>
            <button onClick={openModal}>Open Modal</button>
            <Modal isOpen={isModalOpen} onClose={closeModal} />
        </div>
  );
}

모달 버튼을 클릭했을 때나 단축키를 눌렀을 때 모달 창이 띄워지도록 적용하였다. 내 경우 chrome으로 해당 기능을 구현해서 보여주고자 하였다. 그런데 크롬에서 ctrl+k을 누르면 google search bar가 보여지게 되었다.
해당 기능의 무효화를 위하여 event.preventDefault(); 를 적용하고 모달이 보여지게 구현하였다. 위와 같이 잘 설정하면 해당 모달이 ctrl+k눌렀을 때 잘 띄워지는 것을 확인할 수 있다.

open Modal 버튼

모달을 눌렀을 때 보이는 화면

👇🏻 참고 사이트

https://react-hotkeys-hook.vercel.app/docs/intro
https://velog.io/@juno7803/React-hotkeys
https://until.blog/
https://support.google.com/chrome/answer/157179?hl=ko&co=GENIE.Platform%3DDesktop#zippy=%2C탭-및-창-단축키