이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.
template 태그는
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 type="button" id="add-template-item-btn">아이템 추가하기</button>
<!-- 자바스크립트 코드가 여기에 들어갑니다. -->
<script src="template.js"></script>
</body>
</html>- 사용자가 볼 수 있는 부분은 <h1> 태그와 "렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다."라는 문구입니다.
- 그 아래에 <template> 태그가 정의되어 있습니다. 이 태그는 나중에 사용할 리스트 아이템 템플릿을 정의하는 역할을 합니다.
- 빈 리스트(<ul>)가 있습니다. 여기에 동적으로 아이템을 추가할 것입니다.
- "아이템 추가하기"라는 버튼을 클릭하면 자바스크립트 코드가 동작합니다.
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 배열에서 무작위로 아이템을 선택하고, 선택된 아이템을 리스트에 동적으로 추가합니다.
이렇게 해서 <template> 태그와 자바스크립트를 활용하여 동적으로 리스트 아이템을 추가하는 웹 페이지를 만들었습니다.
구문
<template id="template-id">
<!-- 여기에 템플릿 콘텐츠가 들어갑니다. -->
</template>- <template>: 템플릿을 정의하는 태그입니다.
- id (선택사항): 템플릿에 고유한 식별자를 지정하는 속성입니다. 자바스크립트에서 템플릿을 참조할 때 사용됩니다.
- 템플릿 콘텐츠: 템플릿 내부에 들어갈 실제 HTML 콘텐츠입니다. 이 부분은 나중에 자바스크립트를 통해 동적으로 생성되거나 조작됩니다.
<template> 태그의 사용 이유
재사용성과 유지보수성 - 동일한 레이아웃 또는 컴포넌트가 여러 곳에서 사용될 경우, 해당 구조를 템플릿으로 정의하여 중복 코드를 줄이고 유지보수성을 향상시킬 수 있습니다.
동적 데이터 처리 - 많은 웹 애플리케이션은 사용자 입력이나 서버에서 받아온 데이터를 동적으로 삽입해야 합니다. <template> 태그와 자바스크립트를 사용하면 데이터를 효율적으로 관리하고 동적으로 콘텐츠를 생성할 수 있습니다.
클라이언트 측 렌더링 속도 개선 - 서버에서 모든 콘텐츠를 렌더링하는 대신, 클라이언트 측에서 일부 작업을 수행하여 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다.
복잡한 UI 제어 - 사용자 인터랙션에 따라 UI를 동적으로 업데이트하거나 변경해야 하는 경우, 템플릿과 자바스크립트를 사용하여 쉽게 제어할 수 있습니다.
SPA (Single Page Application) 개발 - 현대적인 웹 애플리케이션은 페이지 전환이 없는 SPA 구조로 개발되는 경우가 많습니다. 이런 경우에는 템플릿과 자바스크립트를 사용하여 화면 갱신과 라우팅을 처리할 수 있습니다.
이러한 이유로 <template> 태그와 자바스크립트를 사용하여 HTML 콘텐츠를 동적으로 생성하고 관리하는 것은 웹 애플리케이션의 성능, 유지보수성, 개발자의 개발 생산성을 향상시키는 데에 도움이 됩니다.
그 밖에 참고한 문헌
https://coding.courses/html-template-tag/
HTML <template> Tag – The Content Template Element - codingCourses
The template tag is used to define reusable pieces of HTML that can be cloned and inserted into the document later using JavaScript.
coding.courses
https://codingeverybody.jp/html-template-tag/
HTML <template>タグ：正しい理解と使い方 - codingEverybody
templateタグは、JavaScriptを使用してHTMLドキュメント内に動的に複製・追加できるコンテンツ（テンプレートコンテンツ）を保持するための領域を示します。レンダリング時には画面に表示され
codingeverybody.jp