Custom Hook을 사용한 키보드 단축키 설정 기능 추가

06 Nov 2023

customhook

이번 포스트에서는 React 애플리케이션에 키보드 단축키 설정 기능을 추가하는 방법을 알아보겠습니다. 이를 위해 Custom Hook을 사용하여 간편하게 키 이벤트를 처리할 수 있습니다.

Custom Hook 작성하기

먼저, Custom Hook을 작성하는 방법부터 알아보겠습니다. 아래의 코드를 참고해주세요.

import { useEffect } from 'react';

const useKeyboardShortcut = (shortcut, callback) => {
  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.key === shortcut) {
        callback();
      }
    };

    window.addEventListener('keydown', handleKeyPress);

    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [shortcut, callback]);
};

export default useKeyboardShortcut;

위의 코드에서 useKeyboardShortcut은 우리가 작성할 Custom Hook의 이름입니다. 이 Hook은 특정 키보드 단축키에 대한 이벤트 핸들링을 담당합니다. Hook은 useEffect를 사용하여 이벤트 리스너를 등록하고 해제합니다.

키보드 단축키 설정 기능 추가하기

이제 위에서 작성한 Hook을 사용하여 키보드 단축키 설정 기능을 추가해보겠습니다. 아래의 코드를 참고해주세요.

import React from 'react';
import useKeyboardShortcut from './useKeyboardShortcut';

const KeyboardShortcutExample = () => {
  const onCtrlEnter = () => {
    console.log('Ctrl + Enter 눌림');
    // 단축키가 눌렸을 때 수행할 동작을 여기에 작성하세요.
  };

  useKeyboardShortcut('Enter', onCtrlEnter);

  return (
    <div>
      <h1>키보드 단축키 설정 기능 추가 예제</h1>
      <p>키보드에서 Ctrl + Enter를 눌러보세요.</p>
    </div>
  );
};

export default KeyboardShortcutExample;

위의 코드에서 useKeyboardShortcut Hook을 사용하여 Enter 키가 눌릴 때 onCtrlEnter 함수가 실행되도록 설정했습니다. onCtrlEnter 함수 내에 단축키가 눌렸을 때 수행할 동작을 작성하면 됩니다.

키보드 단축키 설정 기능은 위의 예제에서는 콘솔에 메시지를 출력하는 간단한 예제로 구현되었습니다. 실제로는 원하는 동작을 수행하도록 적절히 코드를 작성해주시면 됩니다.

결론

Custom Hook을 사용하여 React 애플리케이션에 키보드 단축키 설정 기능을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 향상시킬 수 있고, 키보드로 애플리케이션을 더 효율적으로 조작할 수 있게 됩니다.