ran
한국어

createDocumentFragment

DocumentFragment를 만들고 여러 자식 요소를 담습니다.

API

createDocumentFragment

반환값

인자 설명 타입
DocumentFragment | undefined DocumentFragment 객체 DocumentFragment | undefined

매개변수

매개변수 설명 타입 기본값
list 담을 요소의 배열 Element[] 필수

예시

기본 사용법

import { createDocumentFragment } from 'ranuts';

const div1 = document.createElement('div');
const div2 = document.createElement('div');
const fragment = createDocumentFragment([div1, div2]);

// 한 번에 DOM에 추가
document.body.appendChild(fragment);

요소를 한꺼번에 추가하기

import { createDocumentFragment } from 'ranuts';

const elements = Array.from({ length: 100 }, () => {
  const div = document.createElement('div');
  div.textContent = '항목';
  return div;
});

const fragment = createDocumentFragment(elements);
document.getElementById('container').appendChild(fragment);

서버에서의 안전성

import { createDocumentFragment } from 'ranuts';

// 서버 환경에서는 undefined를 반환합니다
const fragment = createDocumentFragment([element]);
console.log(fragment); // undefined (서버 환경)

참고

  1. 성능 개선: DocumentFragment를 쓰면 DOM 조작 횟수를 줄일 수 있어 더 빨라집니다.
  2. 서버에서도 안전: 서버 환경(document 객체가 없는 경우)에서는 undefined를 반환하며 예외를 던지지 않습니다.
  3. 한 번뿐: 프래그먼트를 DOM에 추가하면 자식 요소들이 대상 요소로 옮겨 가고 프래그먼트 자체는 남지 않습니다.
  4. 활용: 요소를 한꺼번에 추가해 리플로와 리페인트를 줄이고 속도를 높이는 데 흔히 쓰입니다.