[240424 TIL] document Fragment

오늘은 바닐라 자바스크립트로 DOM에 요소를 추가하는 상황에서

documentFragment 객체에 대해 알게 되었습니다.

react를 사용하면 볼 일이 많이 없을 수도 있지만 새로운 개념을 알게되어 정리합니다!

 

Document Fragment 의 정의

DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어 브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능합니다.

 

용도와 효과

-메인 DOM의 조작(manipulation)이 필요할때 페이지 reflow 등 성능적 영향을 최소한으로 줄이기 위해 사용합니다.

-Document Fragment를 루트 노드로 만든 DOM Tree를 사용하면, DOM과 관련된 작업을 페이지에 영향을 주지 않고 적용해서, 한번만 DOM 접근으로 적용할 수 있습니다.

 

그래서 언제 쓰는가?

만약 반복문 안에서 요소를 반복해서 추가하는 상황일 때, 

DOM을 직접적으로 조작하는 것은 리소스가 많이 드는 작업이기 때문에 줄일 수 있으면 줄여야 한답니다!

여러개의 요소를 반복문 안에서 바로 DOM 에 추가하기 보다

DocumentFragment 를 생성하여 여기에 먼저 추가합니다.

그리고 나서 반복문을 빠져나와서 DOM 에 추가하면 됩니다!

 

사용법은 아래와 같습니다.

// <ul> 요소를 찾거나 생성합니다.
const ul = document.querySelector('ul') || document.createElement('ul');

// DocumentFragment를 생성합니다.
const fragment = document.createDocumentFragment();

// 여러 개의 <li> 요소를 생성하여 DocumentFragment에 추가합니다.
for (let i = 0; i < 10; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i + 1}`;
    fragment.appendChild(li);
}

// 모든 <li> 요소를 포함하는 DocumentFragment를 <ul> 요소에 추가합니다.
ul.appendChild(fragment);

// 결과적으로 <ul> 요소가 페이지에 렌더링됩니다.
document.body.appendChild(ul);

 

React Fragment와 무엇이 다른가?

`DocumentFragment`와 React의 `Fragment`는 비슷한 목적을 갖고 있지만, 사용 방법과 구체적인 기능에서 차이가 있습니다.

DocumentFragment
`DocumentFragment`는 웹 브라우저의 일반적인 DOM API의 일부로 제공되며, 메모리에만 존재하는 DOM 노드의 컨테이너입니다. 이는 페이지의 성능을 향상시키기 위해 여러 개의 DOM 변경을 일괄적으로 처리할 수 있게 해주며, 실제 DOM에 적용하기 전까지는 브라우저에 렌더링되지 않습니다. `DocumentFragment`를 사용하면, 여러 요소를 한 번에 DOM에 추가할 수 있으므로 레이아웃 리플로우와 리페인트를 최소화하여 성능을 향상시킬 수 있습니다.

React Fragment
React의 `Fragment`는 React v16.2에서 도입된 기능으로, 별도의 DOM 요소를 추가하지 않고 여러 자식을 그룹화할 수 있게 해줍니다. 이는 주로 컴포넌트가 여러 요소를 반환할 때 추가적인 노드(예: 불필요한 `<div>` 태그)를 DOM에 삽입하지 않기 위해 사용됩니다. React `Fragment`는 오직 렌더링을 목적으로 한 그룹화 도구이며, 성능 최적화보다는 렌더링 결과의 깔끔함과 구조적 목적을 지닙니다.

차이점
- 목적: `DocumentFragment`는 주로 성능 최적화를 위해 사용되며, 실제 DOM 변경을 최소화하기 위한 도구입니다. 반면, React의 `Fragment`는 주로 렌더링 결과의 구조를 단순화하고, 불필요한 DOM 요소의 추가를 방지하기 위해 사용됩니다.
- 구현 환경: `DocumentFragment`는 웹 표준의 일부로서 순수 자바스크립트나 다른 웹 기술에서 사용됩니다. React `Fragment`는 React 라이브러리 내에서만 사용되는 특수한 기능입니다.
- 렌더링 영향: `DocumentFragment`는 브라우저의 리플로우와 리페인트를 관리하여 성능을 향상시킵니다. React `Fragment`는 렌더링에 추가적인 DOM 노드를 생성하지 않는 것을 목적으로 하지만, 직접적인 성능 최적화는 아닙니다.

이 두 기능은 각각의 환경에서 유용하게 사용될 수 있으며, 개발자의 목적에 따라 선택하여 사용할 수 있습니다.