useMutationObserver

useMutationObserver (DOM 변경 관찰)

useMutationObserver 훅은 MutationObserver의 래퍼예요. DOM 트리에 가해지는 변경을 구독할 수 있게 해줘요.

출처: 문서

본문

useMutationObserver 훅은 MutationObserver의 래퍼예요. DOM 트리에 가해지는 변경을 구독할 수 있게 해줘요.

import { useState } from 'react';
import { Button, Text } from '@mantine/core';
import { useMutationObserver } from '@mantine/hooks';

function Demo() {
  const [lastMutation, setLastMutation] = useState('');

  const ref = useMutationObserver(
    (mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'data-mutation') {
          mutation.target instanceof HTMLElement &&
            setLastMutation(mutation.target.dataset.mutation || '');
        }
      });
    },
    {
      attributes: true,
      attributeFilter: ['data-mutation'],
    }
  );

  return (
    <>
      <Button
        ref={ref}
        onClick={(event) => {
          event.currentTarget.dataset.mutation = Math.random().toFixed(3);
        }}
      >
        Click to change to data-mutation attribute
      </Button>

      <Text>Last detected mutation: {lastMutation || 'Not mutated yet'}</Text>
    </>
  );
}

대상 요소 (Target element)

대상 요소에 ref를 전달할 수 없다면 세 번째 인자로 대상 요소를 반환하는 함수를 전달할 수 있어요.

import { useState } from 'react';
import { Kbd, Text } from '@mantine/core';
import { useMutationObserverTarget } from '@mantine/hooks';

function Demo() {
  const [lastMutation, setLastMutation] = useState('');

  useMutationObserverTarget(
    (mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'dir') {
          mutation.target instanceof HTMLElement &&
            setLastMutation(mutation.target.getAttribute('dir') || '');
        }
      });
    },
    {
      attributes: true,
      attributeFilter: ['dir'],
    },
    () => document.documentElement
  );

  return (
    <>
      <Kbd>Ctrl + Shift + L</Kbd>
      <Text>Press Ctrl + Shift + L to change direction</Text>
      <Text>Direction was changed to: {lastMutation || 'Not changed yet'}</Text>
    </>
  );
}

정의 (Definition)

function useMutationObserver(
  callback: MutationCallback,
  options: MutationObserverInit
): React.RefCallback;

function useMutationObserverTarget(
  callback: MutationCallback,
  options: MutationObserverInit,
  target?: HTMLElement | (() => HTMLElement) | null
): void;

더 알아보기 (Learn more)