[JS] DocumentFragment

은채·2022년 9월 16일
0

JavaScript

목록 보기
26/26
post-thumbnail
  • 자바스크립트로 DOM을 만들고 추가하는 방법
    • document.createElement() 생성 -> appendChild() -> DOM 등록
      <script>
         for (let i = 0; i < 10; i++) {
           let divEl = document.createElement('div');
           divEl.innerText = 'hello~ this is ' + i;
           document.body.appendChild(divEl);
         }
       </script>

DocumentFragment

  • DocumentFragment 노드를 사용하면 오직 메모리 상에만 존재하는 경량화된 DOM을 만들 수 있다
    <script>
      const docFrag = document.createDocumentFragment();
      // const docFrag = document.createElement('div');
      
      for (let i = 0; i < 10; i++) {
        let divEl = document.createElement('div');
        divEl.innerText = 'hello~ this is ' + i;
        docFrag.appendChild(divEl);
      }

      document.body.appendChild(docFrag);
    </script>
  • DocumentFragment 를 만든 후,
  • body에 바로 appendChild 하는 것이 아닌, 이 DocumentFragment 노드에 appendChild 한 후,
  • body에는 DocumentFragment 노드를 붙이는 것!
  • 결과는 똑같다!

왜 해???

  • DocumentFragment 만들고 하는 것과 , div를 하나 만들어서 하는 것과 무엇이 다른가?

  • div 태그로 만들었다면

  • 자식 요소들을 만들기 위해 어쩔수 없이 같이 생겨난 부모 div

  • DocumentFragment로 만들었다면

  • 부모 요소 없이, 만들고자 했던 부분들만 생겨났다.

DocumentFragment 의 특징

  • DocumentFragment를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않는다
    그 자식 노드들만 추가 된다

  • DocumentFragment DOM에 추가하면 DocumentFragment 노드의 자식 요소들은 더이상 메모리 상에 존재하지 않는다

    • 확인하기 : body에 붙이기 전, 후를 비교해보자

    • 자동으로 자식 요소들이 삭제 되어 메모리 상에 존재하지 않는다!

    • div 였다면?

    • 자식 요소들이 그대로 남아 메모리 상에 존재한다.

  • 여러개의 각기 다른 부모 요소에 요소를 집어 넣을 때 효율적

  • 1번

    • for문을 이용해서 100개의 div 요소를 만든다
    • 만들어진 요소를 부모 요소(container) 에 각각 집어넣는다
    • 부모요소의 갯수만큼 실행하는데 -> 각 부모 요소에 appenChild를 이용해서 elements의 요소들을 하나씩 순서대로 집어넣는다'
    • j번째 요소를 집어넣을 때 배열은 참조타입이기 때문에 값 자체가 복사되지 않는다
    • cloneNode() 안했을 때 : 마지막 div에만 요소가 들어감

    • cloneNode() 메서드를 활용하여 요소 자체를 복사하자

    • 각 div 마다 100개의 요소가 생긴다.

  • 2번 document.createDocumentFragment() 사용해보기

    • el 요소들을 바로 frag에 등록한다 (빈 배열 필요 없음)
    • 부모 요소에 바로 frag를 등록한다 (이중 for문 필요 없음)
    • farg도 참조타입이기 때문에 clone해서 값 자체를 붙여주자

cloneNode

  • DocumentFragment를 DOM에 추가할 때, DocumentFragment의 자식 노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않기 때문에 유지하고 싶다면 사용할 것

  • cloneNode를 하지 않으면 appendChild 이후 최종적으로 아무것도 남지 않지만

  • cloneNode를 하면 100개의 요소를 마지막에도 확인할 수 있다

profile
반반무마니

0개의 댓글