MutationObserver는 DOM의 변화를 감지하는 옵저버다. DOM과 관련된 어떤 요소가 변하든지 감지할 수 있다. 이를테면, width 혹은 padding 같은 style 태그는 물론, class나 id, 자식 노드의 추가 등이 있다.

DOM의 변화를 감지한다는 특징으로 인해, DOM의 사이즈 변화를 감지하는 ResizeObserver를 대체할 수 있다.

TYPESCRIPT
1
2
3
const mo = new MutationObserver(callback);

mo.observe(tag, options);

요소 등록 시 options를 전달하여 세부 옵션을 조정할 수 있다. MutationObserverInit 타입을 가진다.

attributeFilter에 원하는 속성명을 배열로 지정하면, 해당 이름을 가진 속성의 변화만을 필터링하여 감지한다.

TYPESCRIPT
1
2
3
4
{
    // ...
    attributeFilter: [ 'id', 'class' ]
}

위와 같이 지정할 경우, id 및 class가 변할때만 옵저버가 감지한다. 만약 아무 값도 할당하지 않은 undefined일 경우, 모든 변화를 감지한다.

MutationObserver는 DOM이 변화됐을 때 동작한다. 이 때, 상황에 따라 변화 이전의 값을 기반으로 로직을 구성하기도 하는데, 이 때 attributeOldValue 설정이 유용할 것이다.

TYPESCRIPT
1
2
3
4
{
    // ...
    attributeOldValue: true
}

위와 같이 지정할 경우, 속성 변화를 감지할 시, 변화 이전의 값도 같이 제공해준다. 이전 속성이 존재할 수 없는 첫 변화거나, 속성이 아닌 변화(자식 노드의 추가 등)일 경우 null이 반환된다.

DOM 속성 변화의 감지 여부를 지정한다.

TYPESCRIPT
1
2
3
4
{
    // ...
    attributes: true
}

id, class, style 같은 DOM의 속성 변화를 감지하고 싶을 경우, 해당 설정을 true로 지정해준다.

attributeFilter 혹은 attributeOldValue에 값이 지정된 경우, 해당 옵션을 생략할 수 있다.

DOM의 텍스트 노드 변화(node.value)의 감지 여부를 지정한다.

TYPESCRIPT
1
2
3
4
{
    // ...
    characterData: true
}

DOM의 textContent 값이 바뀔 경우, 이를 감지한다.

TYPESCRIPT
1
2
3
4
5
6
7
function handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
    const tag = document.getElementById('target');

    if (tag?.firstChild?.textContent) {
        tag.firstChild.textContent = e.currentTarget.value;
    }
}

위와 같이 tag.firstChild.textContent 값이 변할 경우, characterData 이벤트가 감지된다.

true로 지정할 경우, attributeOldValue와 비슷하게 텍스트 노드 값 변화 시, 변화 이전의 값을 같이 반환해준다.

TYPESCRIPT
1
2
3
4
{
    // ...
    characterDataOldValue: true
}

이전 속성이 존재할 수 없는 첫 변화거나, 속성이 아닌 변화(자식 노드의 추가 등)일 경우 null이 반환된다.

대상 DOM에 자식 노드가 추가되거나 삭제될 경우를 감지한다.

TYPESCRIPT
1
2
3
4
{
    // ...
    childList: true
}

위와 같은 설정을 통해, 특정 DOM의 구조 변화를 능동적으로 감지할 수 있다.

subtree 옵션으로 감지 범위를 하위 노드까지 확장할 수 있다.

TYPESCRIPT
1
2
3
4
{
    // ...
    subtree: true
}

위 옵션을 활성화하면, 하위 노드의 attributes, characterData, childList 변화까지 감지해준다. 감지 기준은 옵션에 할당한 부모의 기준과 동일하다.

예를들어, attributes 감지만 활성화하고 subtree를 적용하면, 자신 및 하위 노드 전체의 속성 변화 여부를 감지할 수 있다.

콜백 메서드를 통해 DOM 변화 시 동작할 로직을 지정할 수 있다. MutationRecord 타입을 가진다. 이를 코드로 표기하면 아래와 같다.

TYPESCRIPT
1
const mo = new MutationObserver((record) => {});

addedNodes는 추가된 노드가 있을 경우, 이를 배열 형태로 반환한다. 노드 추가, 삭제와 관련된 childList 옵션이 활성화된 경우 반환된다.

HTML
1
2
3
4
5
6
7
8
9
<!-- 초기값 -->
<div id="target">
    
</div>

<!-- addedNodes 반환됨 -->
<div id="target">
    <p>just added!</p>
</div>

위 예시의 경우, #target 하위에 추가된 노드 p의 정보가 담긴다.

removedNodes는 삭제된 노드가 있을 경우, 이를 배열 형태로 반환한다. 조건은 addedNodes와 같다.

HTML
1
2
3
4
5
6
7
8
9
<!-- 초기값 -->
<div id="target">
    <p>just added!</p>
</div>

<!-- removedNodes 반환됨 -->
<div id="target">
    
</div>

attributeName는 속성이 변경된 경우, 변경된 속성의 이름을 반환한다. 속성의 변화와 관련된 attributes 옵션이 활성화 된 경우 반환된다.

HTML
1
2
3
4
5
6
7
8
9
<!-- 초기값 -->
<div id="target">
    
</div>

<!-- attributeName 반환됨 -->
<div id="target" class="hi">
    
</div>

위 예시의 경우, #target 속성으로 추가된 속성명 class가 반환된다.

attributeNamespace 속성 네임스페이스가 변경된 경우, 변경된 속성 네임스페이스를 반환한다. 마찬가지로, attributes 옵션이 활성화 된 경우 반환된다.

변경된 속성이 네임스페이스를 가지고 있을 경우, 네임스페이스를 같이 반환한다고 이해하면 된다.

HTML
1
2
3
4
5
6
7
8
9
<!-- 초기값 -->
<div id="target">
    
</div>

<!-- attributeName 반환됨 -->
<div id="target" class="hi">
    
</div>

만약 class 생성 시 setAttributeNS를 통해 ns라는 네임스페이스로 묶어 생성한다면, 코드는 아래와 같이 구성된다.

TYPESCRIPT
1
tag.setAttributeNS("ns", "class", "hi");

위와 같은 예시에서, attributeName은 class를, attributeNamespace은 ns를 반환하게 된다.

추가 혹은 제거된 노드의 다음 형제 DOM을 반환한다. 노드 추가, 삭제와 관련된 childList 옵션이 활성화된 경우 반환된다.

추가 혹은 제거된 노드의 이전 형제 DOM을 반환한다.

변경 이벤트가 감지된 경우, 변경 이전의 값을 반환한다. attributeOldValue 및 characterDataOldValue 옵션이 true일 경우에만 값을 반환한다.

이벤트가 발생한 태그를 반환한다.

발생한 이벤트의 타입을 반환한다. 아래의 값 중, 발생한 이벤트의 이름을 반환한다.

• attributes
• characterData
• childList

MutationObserver 객체를 반환해준다. 이를 통해 콜백 메서드 내에서도 MutationObserver를 연쇄적으로 다룰 수 있다.

MutationObserver를 커스텀 훅을 통해 간편하게 사용해보자.

TYPESCRIPT
1
2
3
4
export function useMutationObserver(): void
{
  //
}

위와 같이 useMutationObserver 메서드를 정의한다.

useMutationObserver를 사용하기 위해선 아래의 세 요소가 필요하다.

1. 대상 DOM
2. 콜백 메서드
3. 옵션

위 세 요소를 파라미터로 정의하자. 1번의 경우, 일반적으로 HTMLElement가 필요하지만, 해당 훅에서는 HTMLElement 타입 뿐만 아니라, string을 받아 #id, .class와 같은 선택자로 태그를 활용할 수 있도록 만들 것이다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { useEffect } from "react";

export type UseMutationObserverCallback = (entry: MutationRecord) => void;

/**
 * MutationObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseMutationObserverCallback} callback: 콜백 메서드
 * @param {MutationObserverInit} options: 옵션
 */
export function useMutationObserver(ref: Element | string | null, callback: UseMutationObserverCallback, options: MutationObserverInit): void
{
    useEffect(() =>
    {
        const ro = new MutationObserver((entries) =>
        {
            entries.forEach(callback);
        });
    }, [ ref, callback, options ]);
}

MutationObserver를 초기화하여 mo 변수로 할당한다.

이후 ref로 지정한 DOM을 할당한다.

ref는 세 가지 상태에 따라 아래와 같은 분기를 거친다.

• null일 경우 -> 패스한다.
• string일 경우 -> document.querySelector 메서드로 태그를 선택한 뒤, 해당 태그를 등록한다.
• HTMLElement일 경우 -> 이미 Element이므로, 즉시 등록한다.

typeof ref === "string" 구문을 통해 ref가 문자열인지를 판별하여 구현했다.

mo.observe() 메서드를 통해 태그를 등록할 수 있다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { useEffect } from "react";

export type UseMutationObserverCallback = (entry: MutationRecord) => void;

/**
 * MutationObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseMutationObserverCallback} callback: 콜백 메서드
 * @param {MutationObserverInit} options: 옵션
 */
export function useMutationObserver(ref: Element | string | null, callback: UseMutationObserverCallback, options: MutationObserverInit): void
{
    useEffect(() =>
    {
        const mo = new MutationObserver((entries) =>
        {
            entries.forEach(callback);
        });

        // DOM이 유효할 경우
        if (ref)
        {
            // ref가 문자열일 경우
            if (typeof ref === 'string')
            {
                const tag = document.querySelector(ref);

                // 태그가 유효할 경우
                if (tag)
                {
                    mo.observe(tag, options);
                }
            }

            // DOM일 경우
            else
            {
                mo.observe(ref, options);
            }
        }
    }, [ ref, callback, options ]);
}

마지막으로, 컴포넌트가 렌더링 될 때마다 MutationObserver의 등록이 중첩되지 않도록, 초기화 코드를 넣어준다.

mo.disconnect() 메서드를 통해 MutationObserver를 제거할 수 있다.

TYPESCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { useEffect } from "react";

export type UseMutationObserverCallback = (entry: MutationRecord) => void;

/**
 * MutationObserver 적용 훅 메서드
 *
 * @param {Element | string | null} ref: Element
 * @param {UseMutationObserverCallback} callback: 콜백 메서드
 * @param {MutationObserverInit} options: 옵션
 */
export function useMutationObserver(ref: Element | string | null, callback: UseMutationObserverCallback, options: MutationObserverInit): void
{
    useEffect(() =>
    {
        const mo = new MutationObserver((entries) =>
        {
            entries.forEach(callback);
        });

        // DOM이 유효할 경우
        if (ref)
        {
            // ref가 문자열일 경우
            if (typeof ref === 'string')
            {
                const tag = document.querySelector(ref);

                // 태그가 유효할 경우
                if (tag)
                {
                    mo.observe(tag, options);
                }
            }

            // DOM일 경우
            else
            {
                mo.observe(ref, options);
            }
        }

        return () =>
        {
            mo.disconnect();
        };
    }, [ ref, callback, options ]);
}

전체 코드는 위와 같다.

CodeSandbox로 간단한 예시를 구현했다.

이와 같이 MutationObserver를 활용하면 DOM의 변화를 능동적으로 감지할 수 있다.

간혹, React 컴포넌트에서 요소를 변경할 경우, 이를 타 컴포넌트에서 연관지어 추가적인 코드를 실행할 필요가 생기기도 한다. 이를 해결하기 위해 컴포넌트에 불필요한 타 컴포넌트 로직을 넣기도 한다.

MutationObserver를 활용하면 이를 분리하여 간단하게 구현할 수 있다.

남은 옵저버는 상대적으로 사용성이 낮은 것들이다. 그 중, 성능과 관련된 PerformanceObserver에 대해 다룰 예정이다.