[리액트] 키보드 방향키로 페이지 이동하는 기능에 쓰일 코드 저장

아래 코드에서 useEffect 훅을 사용하여 window 객체에 키보드 이벤트 리스너를 등록합니다. 이벤트 처리 함수 handleKeyDown에서는 ArrowRight와 ArrowLeft 키를 처리하는 예시 코드를 작성하였습니다.

useEffect 훅의 cleanup 함수에서는 등록한 이벤트 리스너를 제거토록 합니다. 이렇게 함으로써 컴포넌트가 unmount될 때 이벤트 리스너가 자동으로 제거되어 메모리 누수를 방지할 수 있습니다.

 

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleKeyDown = (e) => {
      // 키보드 이벤트 처리
      if (e.key === 'ArrowRight') {
        // 오른쪽 화살표 키가 눌렸을 때 처리
        // 페이지 이동 등
      } else if (e.key === 'ArrowLeft') {
        // 왼쪽 화살표 키가 눌렸을 때 처리
        // 페이지 이동 등
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return (
    // 컴포넌트 렌더링
  );
}

리액트에서는 원래 자신들이 제공한 훅이나 이벤트 관련 함수를 제외하고는 이벤트를 전역 객체 등에 등록하는 것을 권장하지는 않습니다. 특히 window 객체에 이벤트 리스너를 적용하는 것은 예상치 못한 상황에서 리액트와 충돌이 발생할 수 있습니다. 따라서 이러한 부분을 유의해야 하고, 꼭 필요한 경우가 아니라면 사용을 피하는 것이 좋습니다.