특정 키 입력을 감지해 콜백을 호출합니다.

구현

import { useEffect, useRef } from 'react';

export function useKeyDownEffect(keys: string[], callback: (e: KeyboardEvent) => void) {
  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (!keys.includes(e.key)) return;
      callbackRef.current(e);
    };

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

사용법

1. Escape 키로 모달 닫기

useKeyDownEffect(['Escape'], () => {
  setIsOpen(false);
});

2. 복수 키 처리

useKeyDownEffect(['ArrowUp', 'ArrowDown'], e => {
  if (e.key === 'ArrowUp') moveFocus(-1);
  if (e.key === 'ArrowDown') moveFocus(1);
});