JavaScript 렌더링에 template 사용하기
template과 JavaScript 반복문을 결합해 동적 목록 만들기
JavaScript 렌더링에 template 사용하기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
template 요소
<template> 요소에는 JavaScript로 복제하여 삽입하기 전까지 렌더링되지 않는 HTML이 들어 있습니다. 콘텐츠는 비활성 상태이므로 template이 활성화될 때까지 스크립트가 실행되지 않고, 이미지가 로드되지 않으며, 스타일이 적용되지 않습니다.
template 콘텐츠에 접근하기
template 콘텐츠는 template.content의 DocumentFragment에 저장됩니다. 이를 사용하려면 프래그먼트를 복제합니다: const clone = template.content.cloneNode(true). true 인수는 모든 하위 노드를 포함하여 깊게 복제합니다.
template 인스턴스 렌더링
삽입하기 전에 복제본을 사용자 지정합니다. 복제본 내부를 검색하고, 텍스트 콘텐츠를 설정하고, 이벤트 리스너를 추가합니다. 그런 다음 DOM에 추가합니다: container.appendChild(clone). cloneNode()를 호출할 때마다 독립적인 복사본이 생성되므로 한 복사본을 수정해도 다른 복사본에는 영향을 주지 않습니다.
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}template에서 목록 렌더링
Array.forEach 또는 Array.map을 template과 결합하여 목록을 렌더링합니다. data의 각 항목에 대해 template을 복제하고 값을 채운 다음 목록 container에 추가합니다. 이 패턴은 표준 HTML과 JavaScript만으로 구축하지만 프레임워크와 유사하게 사용할 수 있습니다.
표 행을 위한 template
셀을 포함하는 <tr>이 들어 있는 <template>을 정의합니다. 각 data 행에 맞게 복제하고 값을 채웁니다. textContent를 사용하고 innerHTML을 사용하지 않으므로 HTML을 생성할 때 문자열을 이어 붙일 필요가 없고 별도의 이스케이프도 필요하지 않습니다.
template 활성화는 명시적으로 수행됨
template은 자동으로 렌더링되지 않습니다. 따라서 조건에 따라 렌더링할 프래그먼트를 안전하게 저장할 수 있습니다. 검색 결과가 비어 있을 때만 "결과 없음" template을 표시하고, 네트워크 오류가 발생했을 때만 오류 template을 표시하며, data를 가져오는 동안 로딩 뼈대 화면을 표시할 수 있습니다.
중첩 template
template 안에 다른 template을 포함할 수 있습니다. 중첩된 template은 바깥쪽 template의 DocumentFragment 안에서 비활성 상태로 유지됩니다. 이를 통해 바깥쪽 template을 복제한 후 필요할 때 내부 template을 활성화하는 구성 요소와 유사한 계층 구조를 만들 수 있습니다.
template의 범위 지정 스타일
template의