템플릿 및 슬롯
템플릿과 슬롯 (<template>, <slot>)
<template> 태그는 화면에는 보이지 않지만, 나중에 자바스크립트를 사용해 찍어내듯 반복해서 사용할 HTML 구조를 담아두는 보관함입니다. 브라우저 메모리에 파싱된 상태로 대기하므로 매번 HTML을 문자열로 만드는 것보다 성능상 매우 유리합니다.React나 Vue 같은 모던 프레임워크의 '컴포넌트 재사용' 원리가 바로 이 태그들의 개념에서 출발했습니다.
1. 붕어빵 틀과 앙금 (비유)
모양(UI)은 같지만 안의 내용(Data)만 다를 때 가장 완벽한 해법입니다.
🧇
틀 (<template>)
빵의 껍질 모양을 결정합니다. 화면엔 보이지 않고 주방(메모리)에 보관되어 있다가, 주문이 들어오면 JS가 이를 복제하여 사용합니다.
🍯
빈 공간 (<slot>)
틀 안에서 '내용이 들어갈 빈칸(구멍)'입니다. 팥을 넣을지, 슈크림을 넣을지 자바스크립트가 데이터를 꽂아주는 자리입니다.
2. 시각적 원리 다이어그램
3. 필수 태그 및 함수 정리
| 이름 | 설명 및 역할 |
|---|---|
<template> |
HTML 마크업을 감싸는 컨테이너입니다. 내부에 적힌 태그들은 브라우저에 의해 해석은 되지만, 화면에 렌더링되거나 외부 JS의 간섭을 받지 않습니다. |
<slot name="..."> |
템플릿 안에서 외부의 데이터가 치환될 '자리표시자(구멍)' 역할을 합니다. |
cloneNode(true) |
자바스크립트에서 템플릿의 내용(content)을 하위 자식 노드들까지 포함하여 똑같이 복제해내는 필수 메서드입니다. |