React.js에서 Esc 키로 Tab 닫기

2022-10-27

Esc 키로 Tab 닫기

이벤트 핸들러로 key down을 체크합니다.
키가 눌렸을 때 esc키가 맞는지 체크합니다.

const keyDownHandler = (event) => {
  if (event.keyCode === 27) {
    event.preventDefault();
    window.close();
  }
};

사용자가 key를 누를때마다 keyDownHandler가 실행됩니다.
esc의 keyCode는 27로 esc키가 눌렸는지 체크합니다.
window.close() 함수로 해당 tab을 종료합니다.
window.close() 함수는 window.open(url, '_blank')로 열린 새 탭에서만 동작합니다.

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const keyDownHandler = (event) => {
      if (event.keyCode === 27) {
        event.preventDefault();
        window.close();
      }
    };
    document.addEventListener('keydown', keyDownHandler);
    return () => document.removeEventListener('keydown', keyDownHandler);
  }, []);

  return (
    <div>
      <h1>hi</h1>
    </div>
  );
}

export default App;

React에서는 위와같이 사용하면 됩니다.

import { useEffect } from 'react';

export function escCloseTab() {
  useEffect(() => {
    const keyDownHandler = (event) => {
      if (event.keyCode === 27) {
        event.preventDefault();
        window.close();
      }
    };
    document.addEventListener('keydown', keyDownHandler);
    return () => document.removeEventListener('keydown', keyDownHandler);
  }, []);
}

여러 페이지에서 탭 닫기 함수를 사용하려면 escCloseTab() 함수를 생성하여 사용하시면 됩니다.

frontendreact

Esc 키로 Tab 닫기