useKeyDown

Introduce

사용자가 특정 키를 눌렀을 때 콜백 함수를 호출하는 훅입니다.
주어진 키 입력을 감지하여 사용자가 지정한 콜백 함수를 실행합니다.
모달, 드롭다운 메뉴 등에서 Escape 키를 감지하여 닫기 기능을 구현할 때 유용합니다.

export interface UseKeyDownProps {
  key: string;
  onKeyPress: () => void;
}
 
const useKeyDown = ({ key, onKeyPress }: UseKeyDownProps): void

Props

key : 감지할 키 값. 예를 들어, 'Escape', 'Enter' 등의 키를 사용할 수 있습니다.
onKeyPress : 지정된 키가 눌렸을 때 호출될 콜백 함수.

Examples

TestComponent.tsx

function TestComponent() {
  const [isKeyPressed, setIsKeyPressed] = useState(false);
 
  useKeyDown({ key: 'Enter', onKeyPress: () => setIsKeyPressed(true) });
 
  return (
    <div>
      <h1>{isKeyPressed ? 'Enter Key Pressed!' : 'Press Enter Key'}</h1>
    </div>
  );
}
 
export default TestComponent;

useOutsideClick