HTML5 웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 독립 모듈을 만들 수 있는 강력한 기능을 제공합니다. 이러한 컴포넌트들은 기능을 캡슐화하고, 코드의 유지보수성을 향상시키며, 개발 프로세스를 단순하게 만들어줍니다.

웹 컴포넌트의 기본

웹 컴포넌트는 HTML5의 템플릿, 사용자 정의 요소, 그리고 그룹화된 스타일과 스크립트로 구성됩니다.

템플릿

템플릿은 마크업과 스타일을 정의합니다. 템플릿 안에서 <slot> 요소를 사용하여 외부에서 제공되는 컨텐츠를 받을 수 있습니다.

<template id="custom-template">
  <style>
    /* 스타일 정의 */
  </style>
  <slot></slot>
</template>

사용자 정의 요소

사용자 정의 요소는 HTML 태그처럼 사용되지만, 개발자가 직접 정의한 요소입니다.

<script>
  class CustomElement extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('custom-template').content;
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(template.cloneNode(true));
    }
  }
  customElements.define('custom-element', CustomElement);
</script>

스타일과 스크립트

스타일과 스크립트는 사용자 정의 요소 안에서 사용되는 CSS와 JavaScript로, 특정 컴포넌트에만 적용됩니다.

웹 컴포넌트 커스터마이징

속성 정의

사용자 정의 요소에는 속성을 정의하여 동적으로 컴포넌트를 제어할 수 있습니다.

class CustomElement extends HTMLElement {
  static get observedAttributes() {
    return ['custom-attribute'];
  }
  // ...
}

속성 변경 감지

attributeChangedCallback 메서드를 사용하여 속성의 변경을 감지하고 이에 대한 작업을 수행할 수 있습니다.

class CustomElement extends HTMLElement {
  // ...
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'custom-attribute') {
      // 속성 변경에 따른 로직 처리
    }
  }
}

이벤트 발생

컴포넌트 내부에서 발생하는 이벤트를 외부로 알리기 위해 CustomEvent를 사용할 수 있습니다.

class CustomElement extends HTMLElement {
  // ...
  connectedCallback() {
    this.dispatchEvent(new CustomEvent('custom-event', { detail: 'Event details' }));
  }
}

마치며

HTML5 웹 컴포넌트를 활용하면 재사용 가능한 모듈을 만들고, 커스터마이징할 수 있는 강력한 기능을 활용할 수 있습니다. 컴포넌트들을 적절하게 커스터마이징하여 프로젝트의 요구에 맞게 활용해보세요.