웹 애플리케이션을 개발하다보면 사용자가 마우스 오른쪽 버튼을 클릭했을 때 나타나는 콘텍스트(맥락) 메뉴를 동적으로 관리해야 하는 경우가 많이 있습니다. JavaScript를 사용하여 이러한 동적 콘텍스트 메뉴를 생성하는 방법을 알아보겠습니다.

콘텍스트 메뉴란?

콘텍스트 메뉴는 사용자가 특정 요소를 선택했을 때 표시되는 메뉴입니다. 보통 마우스 오른쪽 버튼을 클릭하면 나타나며, 해당 요소와 관련된 작업을 수행할 수 있는 옵션들이 포함되어 있습니다.

콘텍스트 메뉴 생성하기

콘텍스트 메뉴를 생성하려면 우선 해당 요소에서 contextmenu 이벤트를 처리해야 합니다.

elem.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 기본 동작 방지
  // 콘텍스트 메뉴 생성 및 표시
});

이어서 이벤트 핸들러 함수 내에서 새로운 요소를 동적으로 생성하여 콘텍스트 메뉴로 활용할 수 있습니다.

elem.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 기본 동작 방지
  var contextMenu = document.createElement('div');
  contextMenu.innerHTML = '<ul><li>항목 1</li><li>항목 2</li></ul>';
  contextMenu.style.position = 'absolute';
  contextMenu.style.left = (event.pageX - 10) + 'px';
  contextMenu.style.top = (event.pageY - 10) + 'px';
  document.body.appendChild(contextMenu);
});

위의 예제에서는 contextmenu 이벤트 핸들러 내에서 동적으로 div 요소를 생성하고, 그 안에 목록 항목을 추가하여 콘텍스트 메뉴를 구성했습니다.

마치며

JavaScript를 사용하여 콘텍스트 메뉴 항목을 동적으로 생성하는 방법을 살펴보았습니다. 동적으로 생성된 콘텍스트 메뉴를 통해 사용자에게 편의성을 제공할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.