[JavaScript]DocumentFragment 와 HTML5 template 태그 사용

Document.createDocumentFragment()

• 가짜 documement를 생성하는 메서드. fragmentDocument에서 요소 추가에 필요한 모든 작업을 진행한 뒤, 1회의 작업으로 실제 document에 추가하도록 할 수 있다.
• document 의 태그를 계속 편집하는게 성능 측면에서 좋지 않은데, 이렇게 임시 document 에 작업한 뒤 실제 document에 추가하면 실제로는 마지막 1회만 document를 직접 조작하는 셈이 된다. (리플로우-페이지를 계속 렌더링 하는 것을 줄일 수 있다고 한다.)

// fragmentDocument (가짜 document 생성)
const fragment = document.createDocumentFragment();

// 새로운 element 생성
const newDiv = document.createElement('div');
const text = document.createTextNode('텍스트 생성!');

// 새 element 에 appendChild, 이를 fragment에 append한다.
newDiv.appendChild(text);
fragment.appendChild(newDiv);

// 완성된 fragmentDocument를 실제 document에 append
body.appendChild(fragment);

---

HTML5 template 태그

• 말 그대로 html 템플릿을 미리 만들어 두고, 필요할 경우 자바스크립트를 이용해 해당 템플릿을 복사하여 쓸 수 있다.

<div id="container">
  <h2>Tweet List</h2>
  <div class="tweet">hello</div>
  <div class="tweet">world</div>
  <div class="tweet">code</div>
  <div class="tweet">states</div>
</div>
<!-- template 생성 : template 태그는 실제 페이지에 렌더링 되지 않습니다. -->
<template id="template">
  <div class="tweet">template</div>
</template>

// 브라우저가 THML 템플릿 엘리먼트를 지원하는지 확인
if ('content' in document.createElement('template')) {
  // html 템플릿을 조회하여 가져온다.
  const template = document.querySelector('#template');

  // 템플릿을 추가할 요소를 조회한다.
  const con = document.querySelector('#container');

  // 템플릿의 contents를 복제한다.
  const clone = document.importNode(template.content, true);

  // 복제한 템플릿 요소를 부모 요소에 추가한다.
  con.appendChild(clone);
}

SUMMARY

• 두 가지 모두 미리 생성해 둔 후에 원하는 조건과 시점에 HTML 요소를 생성해 추가할 수 있다는 특징이 있다.
• 잘 알아 두었다가 꼭 필요한 순간에 사용하자!

참고자료

https://www.zerocho.com/category/JavaScript/post/573b3235a54b5e8427432947

https://www.zerocho.com/category/JavaScript/post/573b3235a54b5e8427432947

https://developer.mozilla.org/ko/docs/Web/HTML/Element/template

<template>: 콘텐츠 템플릿 요소 - HTML: Hypertext Markup Language | MDN