템플릿과 슬롯
template과 slot으로 컴포넌트를 조합합니다.
템플릿과 슬롯은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
템플릿 요소
<template> 요소는 파싱되지만 렌더링되지 않는 비활성 HTML을 담습니다. 그 콘텐츠는 clone하여 삽입하기 전까지 페이지에 나타나지 않으므로 재사용 가능한 마크업에 적합합니다.
템플릿 콘텐츠에 접근하기
템플릿의 자식 요소는 .content 프로퍼티인 DocumentFragment에 저장됩니다. 내부의 스크립트, 이미지, 스타일은 삽입될 때까지 실행되거나 로드되지 않습니다.
// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment템플릿 복제하기
importNode 또는 cloneNode(true)를 사용하여 템플릿 콘텐츠를 복사한 다음 clone을 삽입합니다. clone하면 적은 비용으로 여러 복사본을 만들 수 있습니다.
const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);구성 요소 내부의 템플릿
사용자 지정 요소는 템플릿을 한 번 정의한 다음 각 인스턴스에서 이를 섀도 root로 clone하는 경우가 많습니다. 매번 HTML 문자열을 다시 파싱하는 것보다 빠릅니다.
const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';
class MyCard extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.appendChild(tpl.content.cloneNode(true));
}
}
customElements.define('my-card', MyCard);slot이란 무엇인가
<slot>은 요소 자체의 자식 콘텐츠(라이트 DOM)가 투영되는 섀도 트리 내부의 자리 표시자입니다. 이를 사용하면 사용자가 구성 요소에 사용자 지정 콘텐츠를 전달할 수 있습니다.
// Shadow root markup:
// <div class="box"><slot></slot></div>
// Usage:
// <my-card>This text fills the slot</my-card>기본 slot 콘텐츠
<slot> 태그 사이에 배치한 콘텐츠는 대체 콘텐츠로 동작합니다. 사용자가 일치하는 콘텐츠를 제공하지 않을 때만 표시됩니다.
// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.이름이 지정된 slot
name 속성을 사용하면 여러 slot을 함께 사용할 수 있습니다. 라이트 DOM 자식 요소는 slot 속성으로 slot을 지정합니다.
// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>
// Usage:
// <my-card>
// <h2 slot="title">Hello</h2>
// <p slot="body">World</p>
// </my-card>기본(이름 없는) slot
name이 없는 slot이 기본 slot입니다. slot 속성이 없는 모든 자식 요소가 그곳에 투영됩니다. 기본 slot 하나와 이름이 지정된 slot 여러 개를 함께 사용할 수 있습니다.
// <slot name="header"></slot>
// <slot></slot> <!-- default: catches everything else -->slot 콘텐츠 스타일 지정
::slotted() 의사 요소를 사용하면 섀도 스타일 내부에서 투영된 자식 요소의 스타일을 지정할 수 있습니다. 이 의사 요소는 최상위 수준의 slot 노드만 대상으로 합니다.
// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }슬롯 변경 이벤트
할당된 노드가 변경되면 slot에서 slotchange 이벤트가 발생합니다. 사용자가 투영된 콘텐츠를 추가하거나 제거할 때 반응하려면 이 이벤트를 수신하세요.
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes();
console.log('slot now has', nodes.length, 'nodes');
});템플릿과 slot 함께 사용하기
템플릿은 구조를 한 번 정의하고, slot은 사용자가 자신의 콘텐츠를 주입할 수 있도록 하여 그 구조를 유연하게 만듭니다. 두 기능을 함께 사용하면 깔끔하고 재사용 가능하며 사용자 지정할 수 있는 웹 구성 요소를 만들 수 있습니다.
빠른 확인
템플릿과 slot에 대한 이해도를 확인해 보세요.
복습
템플릿과 slot을 배웠습니다.
<template>은.content에 비활성 상태의 재사용 가능한 마크업을 담습니다.- 삽입하기 전에
cloneNode(true)로 복제합니다. <slot>은 라이트 DOM을 섀도 트리로 투영합니다.- 이름이 지정된 slot은
name과 자식 요소의slot속성을 함께 사용합니다. ::slotted()은 투영된 노드의 스타일을 지정하고,slotchange는 업데이트에 반응합니다.
웹 구성 요소 학습을 마쳤습니다. 다음은 Intersection Observer API입니다.
자주 묻는 질문
“템플릿과 슬롯” 강의는 무료인가요?
네 — “템플릿과 슬롯” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“템플릿과 슬롯”에서 뭘 배우나요?
template과 slot으로 컴포넌트를 조합합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“템플릿과 슬롯” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.