React에서 우클릭 메뉴를 커스텀하게 만들기 (onContextMenu 이벤트를 활용한 간단한 메뉴 구현) 😘

웹에서 우클릭하면 브라우저 기본 메뉴가 뜨는 건 너무나 당연하지만,
가끔은 이걸 내 맘대로 커스터마이징하고 싶을 때가 있다.

예를 들면 다음과 같은 케이스가 있다 💁

• 특정 영역에서만 동작하는 우클릭 메뉴
• 게임 UI처럼 우클릭 시 전용 액션을 띄우기
• 우클릭으로 관리자 전용 기능 메뉴를 보여주기

…같은 요구사항 말이다.

이전에 그런 기능이 필요해졌고,
그래서 시작된 삽질과 구현기를 공유해본다. 😎

 

📌 구현의 핵심 -> onContextMenu 이벤트

 

React나 Vanilla JS 모두에서 contextmenu 이벤트는 마우스 우클릭 시 발생한다.

이걸 e.preventDefault()로 막으면?
👉 브라우저 기본 메뉴가 안 뜬다.

그리고 그 자리에 내가 만든 메뉴를 띄우면 원하는 스타일로 구현할 수 있다.

const handleContextMenu = (e: React.MouseEvent) => {
  e.preventDefault();
  // 여기서 내가 만든 메뉴 컴포넌트를 띄운다
};

 

실제 React 구현 예시 💻

import { MouseEvent, useState } from 'react';

function ContextMenuPage() {
  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);

  const handleContextMenu = (e: MouseEvent) => {
    e.preventDefault();
    setMenu({ x: e.clientX, y: e.clientY });
  };

  const closeMenu = () => setMenu(null);

  return (
    <div
      onContextMenu={handleContextMenu}
      style={{ width: '100%', height: '300px', background: '#f5f5f5' }}
    >
      {menu && (
        <ul
          onClick={closeMenu}
          style={{
            position: 'absolute',
            top: menu.y,
            left: menu.x,
            background: '#fff',
            border: '1px solid #ccc',
            padding: 0,
            margin: 0,
            listStyle: 'none',
            zIndex: 1000,
            boxShadow: '0px 2px 6px rgba(0,0,0,0.2)',
          }}
        >
          <li style={{ padding: '8px 12px', cursor: 'pointer' }}>메뉴 항목 1</li>
          <li style={{ padding: '8px 12px', cursor: 'pointer' }}>메뉴 항목 2</li>
          <li style={{ padding: '8px 12px', cursor: 'pointer' }}>닫기</li>
        </ul>
      )}
      <p>여기서 우클릭 해보세요 👇</p>
    </div>
  );
}

export default ContextMenuPage;

 

실제로 사용해보면,

다크모드 이슈;

메뉴 구성을 위해서 고려해야 되는 것들 ✨

• e.clientX, e.clientY 값을 활용해서 메뉴 위치 잡기
• position: absolute로 절대 위치 지정
• 화면 밖으로 메뉴가 튀는 경우 window.innerWidth, innerHeight로 조절 필요
• 메뉴 외 영역 클릭 시 닫기 기능도 추가 가능 (document.addEventListener)
• 메뉴를 포탈로 띄우고 싶다면 ReactDOM.createPortal()도 고려

 

실제 작성한 코드는 다음에서 볼 수 있다 

https://github.com/citron03/practice-next-15/commit/d0534c4c2e7fcc530b1a935ab8d1ff440e6eef09

feat: onContextMenu 예제 페이지 구성 · citron03/practice-next-15@d0534c4

 

📚 참고 자료

• MDN - contextmenu 이벤트
  https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
• React 공식 문서 - Responding to Events
  https://react.dev/learn/responding-to-events
• React Portal 설명
  https://react.dev/reference/react-dom/createPortal

 

이번에 처음으로 onContextMenu를 직접 다뤄보면서, 생각보다는 간단하지만, 메뉴 구성은 직접해야되서 복잡할 수 있겠다고 생각했다.

 

특히 위치 기반 UI는 언제나 예외처리가 중요하고, 우클릭 이벤트는 의외로 강력한 인터랙션 수단이 될 수 있다는 점도 흥미로웠다.

React에서 간단하게 커스텀 메뉴를 만들고 싶은 사람이라면 참고할 수 있을 것 같다.