MutationObserver로 클릭 이벤트 감지하기

이전글

MutationObserver란? DOM 변화 감지 방법

MutationObserver란? DOM 변화 감지 방법

 

살펴보기

MutationObserver는 DOM 변화를 감지하는 API입니다. 이 API를 사용하여 클릭 이벤트 대상 요소가 동적으로 추가되거나 제거되더라도 click 이벤트를 감지할 수 있습니다.

예제코드

React.useEffect(() => {
 // 먼저, event 객체에서 타입을 확인하여 클릭 이벤트인지 확인합니다. 클릭 이벤트가 아니면 함수를 리턴합니다.
 if (event.type !== 'click') {
  return;
 }
 
 // __add() 함수를 정의합니다. 이 함수는 targetEls 매개변수로 받은 요소에 click 이벤트 리스너를 추가합니다.
 const __add = (targetEls: NodeListOf<Element>) => {
  Array.from(targetEls)
   .filter(targetEl => targetEl instanceof HTMLElement)
   .forEach(targetEl => {
    const el = targetEl as HTMLElement;
    
    // SERVICE_ATTR_NAME 속성이 SERVICE_ATTR_VALUE 값과 같지 않은 경우에만 이벤트 리스너를 추가합니다.
    if (el.getAttribute(SERVICE_ATTR_NAME) === SERVICE_ATTR_VALUE) {
     return;
    }
    
    el.setAttribute(SERVICE_ATTR_NAME, SERVICE_ATTR_VALUE);
    el.addEventListener('click', () => clickEventCallback(), false);
   })
 };
 
 // selector 변수를 정의합니다. 이 변수는 클릭 이벤트를 감지할 요소 선택자를 나타냅니다.
 const selector = `[data-event-id~="${event.id}"]`;
 // observer 객체를 생성합니다. MutationObserver 객체는 DOM 변화를 감지하고 콜백 함수를 실행합니다.
 const observer = new MutationObserver(mutationsList => {
  mutationsList
   .filter(mutation => mutation.type === 'childList')
   .filter(mutation => mutation.target instanceof HTMLElement)
   .map(mutation =>
    (mutation.target as HTMLElement).querySelectorAll(selector)
   )
   .forEach(__add);
 });
 
 // 페이지가 로드되면 요소에 onClick 이벤트를 추가합니다.
 __add(document.querySelectorAll(selector));
 
 // observe() 메서드를 사용하여 MutationObserver 객체가 감시할 DOM 요소와 옵션을 지정합니다. 이 경우, document.body 요소를 감시하고 childList 옵션을 설정하여 자식 요소의 추가 및 삭제를 감지합니다.
 observer.observe(document.body, {
  attributes: false,
  childList: true,
  subtree: true,
 });
 
 // 클린업 함수는 컴포넌트가 언마운트될 때 실행되어 MutationObserver 객체를 해제하고 SERVICE_ATTR_NAME 속성을 제거합니다.
 return () => {
  observer.disconnect();
  
  // 속성 제거
  document.querySelectorAll(selector).forEach(targetEl => {
   targetEl.removeAttribute(SERVICE_ATTR_NAME);
  });
 };
}, []);

SERVICE_ATTR_NAME 값을 추가하는 이유는 element.addEventListener가 여러 번 등록되는 것을 막기 위함입니다. MutationObserver는 DOM 변화가 발생한 요소를 인자로 전달받는 콜백 함수를 실행합니다. __add() 함수는 콜백 함수로 targetEls 변수에 저장된 요소를 전달합니다.

SERVICE_ATTR_NAME 값을 추가하면, __add() 함수는 SERVICE_ATTR_NAME 값이 SERVICE_ATTR_VALUE 값과 같은 경우에만 click 이벤트 리스너를 추가합니다. 이를 통해 DOM 변화가 발생하더라도 click 이벤트 리스너가 중복으로 등록되는 것을 방지할 수 있습니다.

Unmount(dependency가 변경될 때)에서 이전에 넣었던 흔적(속성값)을 지워줘야 합니다. 그렇지 않으면, SERVICE_ATTR_NAME 값이 SERVICE_ATTR_VALUE 값과 같은 요소에 click 이벤트 리스너가 계속해서 등록될 수 있습니다.

 

참고: react-channel-plugin