[javascript] Next.js에서의 키보드 이벤트 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

useEffect와 keydown 이벤트를 사용하는 방법:

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    function handleKeyDown(event) {
      // 키보드 이벤트 처리 로직 작성
    }

    window.addEventListener("keydown", handleKeyDown);

    // 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다.
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []); // 의존성 배열이 비어있으므로 컴포넌트가 로드될 때에만 실행됩니다.

  return <div>내 컴포넌트</div>;
}

위의 코드에서는 useEffect 훅과 keydown 이벤트 리스너를 사용하여 키보드 이벤트를 처리합니다. 컴포넌트가 마운트될 때 keydown 이벤트 리스너를 추가하고, 컴포넌트가 언마운트될 때 해당 리스너를 제거합니다. handleKeyDown 함수에 실제로 키보드 이벤트를 처리하는 로직을 작성하면 됩니다.

react-hotkeys 라이브러리를 사용하는 방법:

react-hotkeys 라이브러리는 키보드 이벤트 처리를 쉽게 할 수 있도록 도와줍니다. 이 라이브러리를 사용하려면 먼저 패키지를 설치해야 합니다.

npm install react-hotkeys

다음은 react-hotkeys를 사용한 예시입니다.

import { HotKeys } from "react-hotkeys";

function MyComponent() {
  const handlers = {
    handleKeyDown: (event) => {
      // 키보드 이벤트 처리 로직 작성
    }
  };

  return (
    <HotKeys handlers={handlers}>
      <div>내 컴포넌트</div>
    </HotKeys>
  );
}

위의 코드에서는 HotKeys 컴포넌트를 사용하여 키보드 이벤트 처리 로직을 작성합니다. handlers 객체에 handleKeyDown이라는 이벤트 처리 함수를 작성하고, 해당 함수에서 키보드 이벤트를 처리합니다.

위의 두 가지 방법 중 하나를 선택하여 Next.js에서 키보드 이벤트를 처리할 수 있습니다.