[JS] createDocumentFragment()는 무슨 기능을 할까?

노드를 생성하는 메서드들을 살펴보던 중 createDocumentFragment()라는 메서드를 발견했다.

 

 

다른 메서드들은 무난하게 설명이 이해가 됬는데, 

이 메서드는 설명란에 

 

도큐먼트 프래크먼트 

 

라고만 적혀 있었다. 

 

그래서 찾아보게 되었다. 

해당 블로그에서 많은 도움을 얻었다. 

 

출처: programmer-seva.tistory.com/60 

 

DocumentFragment 노드를 생성해서 사용하면 라이브DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다. 

마치 라이브 DOM 트리처럼 작동하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면 된다. 

자식 노드를 메모리상에서 손쉽게 조작한 후 라이브 DOM에 추가하는 것도 가능하다. 

 

라고 설명 되어있는데, 해당 블로그의 코드들을 살펴보고 설명을 계속 읽어본 경과 아주 간략히 요약할 수 있었다. 

 

미리 메모리상에 특정 노드의 형태를 생성해놓은 뒤 그 노드를 실제 DOM에 추가해서 사용하고 싶을 때에 추가하면 실제 적용이 된다는 것이다. 그러므로 메모리상에서 형태가 존재할 경우에는 적용도 안된 상태이고 아무런 존재감도 없다. 

 

굉장히 신박한 메서드인 것 같다. 

이 메서드가 실제 어떤 류의 기능을 위해서 존재하는 지는 잘 모르겠다. 작동방식이 특이한걸 보니 어떤 특정한 상황에서 자주 활용될 것 같은데, 그게 어떤 상황일까...