웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 기술입니다. 이 기술을 사용하면 마크업, 스타일링, 동작을 하나의 독립된 단위로 캡슐화할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

컴포넌트의 정의

웹 컴포넌트는 CustomElementRegistry를 이용하여 정의할 수 있습니다. 아래는 간단한 컴포넌트의 정의 예시입니다.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 컴포넌트 초기화 로직
    // 컴포넌트의 내용은 this.attachShadow({ mode: 'open' })를 통해 선언할 수 있습니다.
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <style>
        /* 컴포넌트의 스타일링 */
      </style>
      <div>
        <!-- 컴포넌트의 마크업 -->
      </div>
    `;
  }
}

// 컴포넌트를 등록합니다.
customElements.define('my-component', MyComponent);

위의 예시에서 MyComponent는 HTMLElement를 상속받는 자식 클래스입니다. constructor 메서드에서 컴포넌트의 초기화 로직과 컴포넌트의 내용을 정의합니다. 내용은 this.attachShadow({ mode: 'open' })를 통해 선언된 shadowRoot에 캡슐화됩니다. 컴포넌트의 마크업과 스타일링은 이 shadowRoot 내부에서 이루어집니다.

컴포넌트의 사용

등록된 웹 컴포넌트는 일반 HTML 태그처럼 사용할 수 있습니다. 아래는 my-component를 사용하는 예시입니다.

<my-component></my-component>

위의 예시에서는 웹 컴포넌트의 태그인 <my-component>를 사용하여 컴포넌트를 화면에 표시합니다. 컴포넌트 내용은 웹 컴포넌트의 정의에 따라 동적으로 생성됩니다.

컴포넌트의 속성

웹 컴포넌트는 속성을 통해 외부에서 값을 전달받을 수 있습니다. 아래는 컴포넌트에 속성을 추가하는 예시입니다.

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor() {
    super();
    // ...
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      // 속성 값이 변경될 때 실행되는 로직
    }
  }
}

// ...

위의 예시에서는 observedAttributes 배열에 관찰할 속성 이름을 정의합니다. observedAttributes에 포함된 속성이 변경될 때 attributeChangedCallback 메서드가 호출됩니다. 이를 통해 속성 값의 변경에 대한 로직을 처리할 수 있습니다.

결론

웹 컴포넌트는 재사용 가능한 UI 요소를 만들기 위한 강력한 도구입니다. 컴포넌트의 정의, 사용, 속성 등에 대해 알아보았습니다. 웹 컴포넌트를 사용하여 웹 애플리케이션의 개발 생산성을 향상시키고 코드의 구조를 개선하는데 도움이 될 것입니다.

참고자료:

• MDN 웹 컴포넌트 개요
• 웹 컴포넌트 예시 - MDN