TIL - HTML tag : template, script, slot, mark

신혜린·2023년 8월 2일

참고 |
[DOM 다루기] template 태그 이용
Cracking Vue.js
[HTML] <script> 태그

Vue로 작성된 컴포넌트를 React로 바꾸기 위해 Vue 컴포넌트 파일을 처음 접해보고, 최상단에 있는 <template> 태그가 무엇을 의미하는 건지 알아보기 위해 html 태그들에 대해 다시 알아보게 되었다.

`<template>` : 콘텐츠 템플릿 요소

페이지를 불러온 순간 즉시 그려지지는 않음
실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 사용자에게 보여지지 않음
페이지를 불러오는 동안 <template> 요소의 콘텐츠를 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아님
특정 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너와 같음

<!-- html 코드 -->
<template id = "will-be-rendered">
  <span>I am template tag</span>
</template>

<div id = "target">I am div tag</div>

<script src="script.js"></script>

// JavaScript 코드
let target = document.querySelector('#target');
let template = document.querySelector('#will-be-rendered');

// will-be-rendered 안쪽 내용을 복사 (자식 노드 전부 포함해서)
let newContent = document.importNode(template.content, true);

target.innerHTML = '';
target.appendChild(newContent);

위의 html 파일을 로드 하면 will-be-rendered의 id를 가진 template 태그의 내용이 문서에 출력된다.

script에서 template태그를 활성화(importNode) 시켜주었기 때문.

html코드만 로드한다면 template 태그의 내용은 화면에 보이지 않음.

importNode()를 통해 숨겨진 html의 template 태그 내용을 화면 위로 끌어올린 것.

⌨️ Document.importNode(externalNode, deep)
: 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있게 해주는 메소드

externalNode는 다른 문서에서 가져오는 노드
deep은 boolean 타입을 가지는데, 노드의 자식 요소들을 포함하여 가져올 것인지 여부를 나타냄

`<script>` : 클라이언트 스크립트

script 태그는 HTML에 클라이언트 스크립트(client-side script)를 추가하고 싶을 때 사용한다.

클라이언트 스크립트? -> 웹에서 사용되는 스크립트 언어 중 클라이언트 사이드에서 실행되는 스크립트 언어를 일컫으며, 클라이언트 사이드란 네트워크의 한 방식인 클라이언트-서버 구조의 클라이언트 쪽에서 행해지는 처리를 말한다.
클라이언트 스크립트의 대표적인 예) 브라우저에서 해석해서 구동되는 스크립트인 JavaScript

웹 브라우저의 동작을 제어하거나 데이터와 실행 가능한 코드를 HTML에 포함하고 싶을 때 사용하는 태그

💡 <script> 태그의 위치
script 태그는 어디에 위치해 있느냐에 따라 구동 방식이 바뀌는데, body 태그의 최하단에 위치하는 게 가장 좋다.
유저의 편의성을 위해서는 렌더링이 최대한 빨리 되는 게 좋은데, 렌더링 엔진이 HTML 문서를 파싱하는 도중 script 태그를 만나게 되면 중간에 파싱을 멈추게 되기 때문에 그만큼 브라우저 화면에 표시되는 시간이 길어지게 된다.
이와 같은 상황을 막기 위해 script 태그는 body 태그의 최하단에 위치하는 게 가장 좋은 것.
(자세한 건 다음 블로그의 '브라우저 구조' 그림 참고)

`<slot>` : vue에서 사용하는 컴포넌트 재사용 태그

슬롯(slot)은 컴포넌트의 재사용성을 높여주는 기능으로, 특정 컴포넌트에 등록한 하위 컴포넌트의 마크업을 확장하거나 재정의할 수 있음.

<!-- ButtonTab.vue -->
<template>
  <div class="tab panel">
    <!-- 탭 헤더 -->
    <slot></slot>
    <!-- 탭 본문 -->
    <div class="content">
      Tab Contents
    </div>
  </div>
</template>

위 코드는 ButtonTab 컴포넌트의 코드를 나타냄
ButtonTab 컴포넌트를 등록한 상위 컴포넌트에서 <slot> 태그 영역을 구현하지 않으면 해당 영역은 공백으로 표시된다.

<!-- TabContainer.vue -->
<template>
  <button-tab>
    <!-- slot 영역 -->
    <h1>First Header</h1>
  </button-tab>
  <button-tab>
    <!-- slot 영역 -->
    <h1>Second Header</h1>
  </button-tab>
  <button-tab>
    <!-- slot 영역 -->
    <h1>Third Header</h1>
  </button-tab>
</template>

<script>
export default {
  components: {
    ButtonTab
  }
}
</script>

TabContainer 컴포넌트에 ButtonTab 컴포넌트를 등록하고 세 곳에 표시했음.
* <button-tab> 컴포넌트 태그의 안에 각기 다른 헤더의 내용을 정의함.
-> 이처럼 슬롯을 사용하면 컴포넌트의 특정 마크업 영역을 재정의하여 같은 컴포넌트를 각기 다르게 표현할 수 있게 된다.

Named Slots

슬롯은 name 속성을 지정하여 여러 개 사용할 수도 있다.

<!-- ButtonTab.vue -->
<template>
  <div class="tab panel">
    <!-- 탭 헤더 -->
    <slot name="header"></slot>
    <!-- 탭 본문 -->
    <slot name="content"></slot>
  </div>
</template>

name이 header인 슬롯과 content인 슬롯 2개를 정의함

<!-- TabContainer.vue -->
<template>
  <button-tab>
    <!-- slot 영역 -->
    <h1 slot="header">First Header</h1>
    <div slot="content" class="content">Tab Contents #1</div>
  </button-tab>
  <button-tab>
    <!-- slot 영역 -->
    <h1 slot="header">Second Header</h1>
    <div slot="content" class="content">Tab Contents #2</div>
  </button-tab>
  <button-tab>
    <!-- slot 영역 -->
    <h1 slot="header">Third Header</h1>
    <div slot="content" class="content">Tab Contents #3</div>
  </button-tab>
</template>
..

정의된 슬롯들을 TabContainer 컴포넌트에 세번씩 등록한 모습

<button-tab>
  <!-- slot 영역 -->
  <template slot="header">
    <h1>First Header</h1>
  </template>
  <template slot="content">
    <div class="content">Tab Contents #1</div>
  </template>
</button-tab>

위와 같이 직접 <template> 태그를 이용하여 사용하는 방법도 있음.

참고 |
Vue.js 2.6버전부터 Named Slots 문법이 바뀌었다

<!-- 기존(2.5 이하) -->
<template slot="header">
  <h1>First Header</h1>
</template>

<!-- 이후(2.6 이상) -->
<template v-slot:header>
  <h1>First Header</h1>
</template>