5.1 태그 <template>
HTML의 <template>
태그는 페이지 로드 시 표시되지 않지만, JavaScript를 통해 나중에 사용할 수 있는 HTML 코드 조각을 정의할 수 있게 해줘. 이건 동적 컨텐츠 생성 및 삽입, 예를 들어 리스트 항목이나 제품 카드, 다른 반복적 구조들에 특히 유용해.
<template>
요소는 HTML 코드를 저장하는 데 사용돼, 이 코드는 페이지에 즉시 표시되지 않아. <template>
안의 내용은 페이지 로드 시 브라우저에 의해 렌더링되지 않지만, DOM (Document Object Model)을 통해 접근 가능하고, JavaScript로 복제하고 문서에 삽입될 수 있어.
문법:
<template>
<!-- 템플릿 내용 -->
</template>
<template> 태그의 주요 특징
- 내용 숨김:
<template>
태그의 내용은 페이지 로드 시 표시되지 않아. - JavaScript 사용:
<template>
태그의 내용은 JavaScript로 복제하고 DOM에 삽입할 수 있어. - 지연 로드: 필요에 따라 내용 로드 및 표시를 허용해 페이지 성능을 향상시킬 수 있어.
<template> 태그 사용 예시
이 예시에서는 "Add Item" 버튼을 클릭하면 새로운 리스트 항목이 만들어지며 <ul>
리스트에 추가돼. 새로운 리스트 항목의 템플릿은 <template>
태그 안에 정의돼 있어.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">This is a new item</li>
</template>
// DOM에서 사용할 요소에 대한 참조 얻기
const addButton = document.getElementById('addButton'); // "추가" 버튼
const itemList = document.getElementById('itemList'); // 항목을 추가할 리스트
const itemTemplate = document.getElementById('itemTemplate'); // 리스트 항목의 템플릿
// "추가" 버튼에 이벤트 핸들러 추가하기
addButton.addEventListener('click', () => {
// 리스트 항목 템플릿 내용 복제하기
const newItem = itemTemplate.content.cloneNode(true); // true는 모든 자식 요소를 포함한 깊은 복제를 의미해
// 새로운 항목을 리스트에 추가하기
itemList.appendChild(newItem);
});
5.2 예시: 상품 카드 생성
<template>
와 JavaScript를 사용해서, 예를 들어 상품 카드를 포함한 요소 목록을 생성할 수 있어.
<template> 태그 사용 예시:
<h1>상품 목록</h1>
<div id="productList"></div>
<template id="productTemplate">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
<span class="price"></span>
</div>
</template>
// 스크립트 실행 전에 DOM이 완전히 로드되기를 기다림
document.addEventListener('DOMContentLoaded', () => {
// 상품에 대한 데이터 배열
const products = [
{ title: '상품 1', description: '상품 1 설명', price: '100 달러' },
{ title: '상품 2', description: '상품 2 설명', price: '200 달러' },
{ title: '상품 3', description: '상품 3 설명', price: '300 달러' },
];
// DOM 요소에 대한 참조 얻기
const productList = document.getElementById('productList'); // 제품 리스트 컨테이너
const template = document.getElementById('productTemplate').content; // 제품 요소 템플릿
// 제품 배열을 반복하며 각각의 요소를 리스트에 생성
products.forEach(product => {
// 제품 템플릿 복제하기
const clone = document.importNode(template, true); // true - 깊은 복제
// 복제된 템플릿에 데이터를 입력하기
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// 리스트에 채워진 템플릿 추가하기
productList.appendChild(clone);
});
});
설명
<template>
태그: 페이지 로드 시 표시되지 않는 HTML 코드를 포함하고 있어.document.importNode(template, true)
메소드: 템플릿 내용을 복제해.querySelector
와textContent
메소드: 문서에 삽입하기 전에 복제된 템플릿 내용을 변경하는 데 사용돼.
5.3 <template> 태그의 장점
성능 향상
템플릿을 사용하면 나중에 사용할 HTML 코드를 미리 로드할 수 있어. 이는 페이지 성능을 향상시킬 수 있어, 왜냐하면 템플릿의 내용이 렌더링되지 않고 초기 페이지 로드에 영향을 미치지 않기 때문이야.
동적 컨텐츠 간소화
템플릿은 동적 컨텐츠 생성 과정을 간소화해. JavaScript를 사용해 프로그래밍 방식으로 HTML 코드를 생성하는 대신, 미리 준비된 템플릿을 복제하고 수정할 수 있어.
편리성과 가독성
템플릿은 코드를 더 읽기 쉽고 구조화되게 만들어줘, 반복되는 요소용 HTML 코드를 JavaScript에 포함시키지 않고 별도로 보관할 수 있기 때문이야.
조건부 컨텐츠 표시 예시:
<h1>작업 결과</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// DOM 요소에 대한 참조 얻기
const messageContainer = document.getElementById('messageContainer'); // 메시지 컨테이너
const template = document.getElementById('messageTemplate').content; // 메시지 템플릿
// 메시지를 표시하기 위한 함수
function showMessage(type, text) {
// 메시지 템플릿 복제하기
const clone = document.importNode(template, true); // true - 깊은 복제
// 복제본 내부의 메시지 요소에 대한 참조 얻기
const messageDiv = clone.querySelector('.message');
// 메시지 유형에 해당하는 클래스 추가하기 (success 또는 error)
messageDiv.classList.add(type);
// 메시지 텍스트 설정하기
messageDiv.querySelector('.content').textContent = text;
// 메시지를 컨테이너에 추가하기
messageContainer.appendChild(clone);
}
// 메시지를 표시하기 위해 함수 호출하기
showMessage('success', '작업이 성공적으로 완료되었습니다!');
showMessage('error', '작업 중 오류가 발생했습니다.');
});
설명:
showMessage()
함수: 메시지 유형 (성공 또는 오류)과 메시지 텍스트를 수락하고, 템플릿을 복제하여 메시지 컨테이너에 추가해..success
및.error
클래스: 메시지 유형에 따라 복제된 템플릿에 스타일링을 위해 적용돼.