HTML5 template 태그

<template> 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용합니다.

 

<template> 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다.

하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.

 

<template> 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다.

만약 <template> 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다.

 

템플릿 엘리먼트는 자바스크립트 코드로 많은 양의 코드를 적지 않아도 되고, 조건에 따라 DOM의 변경도 가능합니다. 이러한 변경은 강력한 DOM API들을 그대로 사용할 수 있어 편리합니다. 템플릿 엘리먼트는 DOM에 한 번 정의되면 필요할 때마다 복사하여 붙여넣기 때문에 성능도 훌륭합니다.

 

템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요.

 

예제:

<template>
  <h1>예제만들기</h1>
  <img src="/images/image.png" alt="예제이미지">
</template>

템플릿 엘리먼트 + 웹 컴포넌트

이러한 장점들으로 템플릿 엘리먼트는 웹 컴포넌트를 구성하는 표준이 되었습니다. 템플릿 엘리먼트는 스크립트와 스타일도 포함할 수 있습니다. 스크립트와 스타일은 템플릿에 있을때는 적용되지 않지만, 복사되어 Document에 붙을 때에 적용됩니다. 쉐도우 돔(Shadow DOM)과 시너지를 일으켜 웹 컴포넌트의 템플릿 기능을 수행하는 데 충분한 장점이라 할 수 있습니다.

 

그러나, 템플릿 엘리먼트는 템플릿이 HTML로 작성되어야 한다는 것이 오히려 단점이 되기도 합니다. 컴포넌트의 컨트롤러에 해당하는 자바스크립트와 템플릿 뷰에 해당하는 HTML이 분리되어야 한다는 점입니다. 컴포넌트와 모듈이 정확히 동의어라고 할 수는 없지만, 모듈로서 분리되어 재사용 될 수 있어야 의미가 있습니다. 그런데 템플릿 엘리먼트와 커스텀 엘리먼트(Custom Elements)를 컴포넌트로 구성하려면 HTML, JS 두 개의 파일이 필요합니다. 이 방식은 웹 컴포넌트를 모듈로 만들기에 큰 걸림돌입니다.

 

참고 및 출처 : https://tcpschool.com/html-tags/template

코딩교육 티씨피스쿨

https://kyu.io/%EC%9B%B9-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B84%E2%80%8A-%E2%80%8Atemplate-element-html-imports/