[javascript] 템플릿 태그를 활용한 웹 컴포넌트 구현 방법

07 Dec 2023

javascript

웹 개발에서 컴포넌트는 재사용 가능한 독립 단위로서, 웹 애플리케이션의 구조를 구성하는 중요한 요소입니다. 이번에는 템플릿 태그를 활용하여 웹 컴포넌트를 만들어보는 방법을 알아보겠습니다.

1. 템플릿 태그란?

템플릿 태그는 HTML5에서 도입된 요소로서, 웹 컴포넌트를 만들 때 유용하게 사용할 수 있습니다. 템플릿 태그는 보통 <template>으로 표현되며, 해당 태그 안에는 컴포넌트의 구조와 내용을 정의할 수 있습니다.

<template id="my-component">
  <div>
    <h1>웹 컴포넌트 예제</h1>
    <p>이것은 웹 컴포넌트의 내용입니다.</p>
  </div>
</template>

위 예제에서 id 속성은 템플릿을 식별하기 위한 고유한 값이며, 템플릿 내부에는 사용자가 원하는 구조와 내용을 작성할 수 있습니다.

2. 템플릿 컴포넌트 만들기

템플릿을 활용하여 컴포넌트를 만들기 위해서는 JavaScript를 사용하여 템플릿을 인스턴스화해야 합니다. 아래는 my-component 템플릿을 사용하여 웹 컴포넌트를 만드는 예제입니다.

class MyComponent extends HTMLElement {
  constructor() {
    super();

    const template = document.getElementById('my-component').content;
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(template.cloneNode(true));
  }
}

customElements.define('my-component', MyComponent);

위 예제에서 MyComponent 클래스는 HTMLElement를 상속하여 웹 컴포넌트를 정의합니다. constructor 메서드에서 getElementById를 사용하여 템플릿을 가져와 shadowRoot에 추가합니다.

3. 웹 컴포넌트 사용하기

위에서 정의한 웹 컴포넌트를 HTML에서 사용하기 위해서는 해당 컴포넌트를 태그로 추가하면 됩니다.

<body>
  <my-component></my-component>
</body>

위 예제에서 <my-component></my-component> 태그를 사용하여 웹 컴포넌트를 추가할 수 있습니다. 이렇게 하면 템플릿 내용이 해당 태그에 렌더링되어 화면에 표시됩니다.

4. 결론

템플릿 태그를 활용하여 웹 컴포넌트를 구현하는 방법을 알아보았습니다. 템플릿을 사용하면 컴포넌트의 구조와 내용을 동적으로 제어할 수 있으며, 코드의 가독성과 유지보수성을 높일 수 있습니다. 이를 통해 재사용 가능하고 확장성 있는 웹 애플리케이션을 개발할 수 있습니다.