HTML <template> 태그 사용 방법

`<template>` 태그의 정의 및 사용법

<template> 태그는
HTML 문서에 자바스크립트를 활용하여 동적으로 복제하고 추가할 수 있는 관련 콘텐츠를 탬플릿으로 보관하는 영역을 나타냅니다.

렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>template 태그</title>
    </head>
    <body>
        <h1>template 태그</h1>
        <p>렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다.</p>
        <template id="list-item-template">
            <li class="template-list-item"></li>
        </template>
        <ul id="template-item-list"></ul>
        <button id="add-template-item-btn">아이템 추가하기</button>
        
        <!-- 자바스크립트 코드가 여기에 들어갑니다. -->
        <script src="template.js"></script> 
    </body>
</html>

사용자가 볼 수 있는 부분은 <h1> 태그와 "렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다."라는 문구입니다.
그 아래에 <template> 태그가 정의되어 있습니다. 이 태그는 나중에 사용할 리스트 아이템 템플릿을 정의하는 역할을 합니다.
빈 리스트(<ul>)가 있습니다. 여기에 동적으로 아이템을 추가할 것입니다.
"아이템 추가하기"라는 버튼을 클릭하면 자바스크립트 코드가 동작합니다.

JavaScript - template.js

const itemList = document.getElementById('template-list-item');
const listItemTemplate = document.getElementById('list-item-template');
const addItemBtn = document.getElementById('add-template-item-btn');

const predefinedItems = ['Apple', 'Banana', 'Orange', 'Grapes', 'Peach'];

addItemBtn.addEventListener('click', () => {
    const randomIndex = Math.floor(Math.random() * predefinedItems.length);
    const selectedText = predefinedItems[randomIndex];

    const listItemClone = listItemTemplate.content.cloneNode(true);
    const listItem = listItemClone.querySelector('.template-list-item');
    listItem.textContent = selectedText;
    itemList.appendChild(listItemClone);
});

자바스크립트 코드는 "아이템 추가하기" 버튼을 클릭하면 실행됩니다. 먼저 predefinedItems 배열에서 무작위로 아이템을 선택하고, 선택된 아이템을 리스트에 동적으로 추가합니다.

브라우저에서 실제 작동되는 모습 버튼을 클릭해 보세요! 클릭할 때마다 'Apple', 'Banana', 'Orange', 'Grapes', 'Peach' 중 무작위로 아이템을 선택하고, 선택된 아이템을 리스트에 동적으로 추가합니다.

template 태그

렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다.

이렇게 해서 <template> 태그와 자바스크립트를 활용하여 동적으로 리스트 아이템을 추가하는 웹 페이지를 만들었습니다.

구문

<template>: 템플릿을 정의하는 태그입니다.
id (선택사항): 템플릿에 고유한 식별자를 지정하는 속성입니다. 자바스크립트에서 템플릿을 참조할 때 사용됩니다.
템플릿 콘텐츠: 템플릿 내부에 들어갈 실제 HTML 콘텐츠입니다. 이 부분은 나중에 자바스크립트를 통해 동적으로 생성되거나 조작됩니다.

`<template>` 태그의 사용 이유

재사용성과 유지보수성

동일한 레이아웃 또는 컴포넌트가 여러 곳에서 사용될 경우, 해당 구조를 템플릿으로 정의하여 중복 코드를 줄이고 유지보수성을 향상시킬 수 있습니다.

동적 데이터 처리

많은 웹 애플리케이션은 사용자 입력이나 서버에서 받아온 데이터를 동적으로 삽입해야 합니다. <template> 태그와 자바스크립트를 사용하면 데이터를 효율적으로 관리하고 동적으로 콘텐츠를 생성할 수 있습니다.

클라이언트 측 렌더링

서버에서 모든 콘텐츠를 렌더링하는 대신, 클라이언트 측에서 일부 작업을 수행하여 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다.

복잡한 UI 제어

사용자 인터랙션에 따라 UI를 동적으로 업데이트하거나 변경해야 하는 경우, 템플릿과 자바스크립트를 사용하여 쉽게 제어할 수 있습니다.

SPA (Single Page Application) 개발

현대적인 웹 애플리케이션은 페이지 전환이 없는 SPA 구조로 개발되는 경우가 많습니다. 이런 경우에는 템플릿과 자바스크립트를 사용하여 화면 갱신과 라우팅을 처리할 수 있습니다.

이러한 이유로 <template> 태그와 자바스크립트를 사용하여 HTML 콘텐츠를 동적으로 생성하고 관리하는 것은 웹 애플리케이션의 성능, 유지보수성, 사용자 경험을 향상시키는 데에 도움이 됩니다.

브라우저 호환성

template 태그의 브라우저 호환성
태그	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<template>`	26	13	22	8

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

template 태그의 명세서 사양
명세서 사양
`<template>`	HTML Standard #the-template-element

HTML <template> 태그 사용 방법