웹 컴포넌트 알아보기

웹 컴포넌트

웹 컴포넌트(Web Components)는 웹 페이지와 웹 앱을 만드는 데 사용하는 재사용 가능한 사용자 지정 요소를 만들 수 있게 하는 기술들의 집합이다.

웹 컴포넌트는 네이티브 웹 표준을 기반으로 하므로, 추가적인 라이브러리나 프레임워크 없이도 동작하며, 다양한 프레임워크와 함께 사용될 수 있다.

 

생기게 된 계기

1. 프레임워크의 파편화: 웹 개발의 역사를 거슬러 올라가면, 다양한 JavaScript 라이브러리와 프레임워크들이 서로 경쟁하며 성장해 오며 jQuery, Angular, React, Vue 등과 같은 도구들이 각자의 컴포넌트 시스템을 가지게 되었다. 이로 인해 동일한 컴포넌트를 다양한 프레임워크에 맞게 재작성해야 하는 상황이 발생하게 되었고, 웹 컴포넌트는 이러한 프레임워크의 경계를 허물고, 표준 기반의 컴포넌트를 만들어 여러 환경에서 재사용할 수 있게 하는 목표를 가지게 되었다.
2. 캡슐화와 격리: 전통적인 웹 개발에서는 CSS와 JS가 전역 범위(global scope)에서 동작하도록 구성된 경우가 많았다. 이로 인해 다양한 스타일과 스크립트 간의 충돌이 발생하기 쉬웠는데, 이러한 문제를 웹 컴포넌트의 Shadow DOM을 이용해 컴포넌트의 내부 구조와 스타일을 외부로부터 격리하여 해결하고자 하려는 시도가 발생했다.
3. 네이티브 지원: 웹 컴포넌트는 웹 플랫폼의 네이티브 표준으로 이는 추가적인 라이브러리나 프레임워크 없이도 브라우저에서 직접 지원되는 기능이라는 의미를 가지고 있다. 이런 부분에서 웹 컴포넌트는 성능적인 이점을 가져다주며, 또한 다양한 환경에서 일관된 동작을 보장하고 있다.
4. 사용자 지정 요소의 필요성: 웹은 계속 진화하고 있고, 개발자들은 기존 HTML 요소들로는 표현하기 어려운 복잡한 사용자 인터페이스와 컴포넌트를 만들어야 하는 경우가 많았는데, 웹 컴포넌트의 Custom Elements는 개발자가 자신만의 HTML 요소를 정의하고 활용할 수 있게 해준다.

 

주요 기술

Custom Elements

• 사용자 정의 HTML 요소를 생성하고 동작을 정의할 수 있게 해주며, 이를 통해 새로운 HTML 태그를 정의하고, 해당 태그의 생명주기와 행동을 제어할 수 있다.
• 특징
  • customElements.define(): 사용자 지정 요소를 등록한다.
  • 생명주기 콜백: 커스텀 요소의 생성, 연결, 연결 해제, 속성 변경 등의 생명주기 이벤트를 감지할 수 있다.
  • 상속: 기존 HTML 요소들을 확장하여 새로운 요소를 생성할 수 있다.

 

JavaScript

// 사용자의 커스텀 컴포넌트를 정의
class CustomComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = 'CustomComponent 생성';
  }
}

// 커스텀 컴포넌트를 적용
customElements.define('custom-component', CustomComponent);

 

HTML

<my-custom-element></my-custom-element>

custom-component라는 이름으로 element를 생성하여 해당 element를 적용할 수 있다.

 

Shadow DOM

• 컴포넌트의 내부 구조와 스타일을 캡슐화하여 외부와 독립적으로 만들 수 있게 해준다. 이를 통해 컴포넌트 내부의 DOM과 스타일이 외부 환경의 영향을 받지 않게 된다.
• 특징
  • 캡슐화: Shadow DOM 내부의 요소와 스타일은 외부 DOM과 격리된다. 이는 스타일 충돌을 방지하고 컴포넌트를 보다 견고하게 만들어 준다.
  • 슬롯(slot): Shadow DOM 내부에서 <slot> 요소를 사용하여 외부 콘텐츠를 삽입할 수 있다.

 

JavaScript

class ShadowDomElement extends HTMLElement {
  constructor() {
    super();
    const shadowComponent = this.attachShadow({ mode: 'open' });
    shadowComponent.innerHTML = `
      <style>
        p {
          color: #333333;
        }
      </style>
      <p>shadow component shadow component.</p>
    `;
  }
}

customElements.define('shadow-dom-element', ShadowDomElement);

 

HTML

<shadow-dom-example></shadow-dom-example>

 

HTML Templates

• 정의: HTML Templates는 <template> 태그를 사용하여 재사용 가능한 마크업 구조를 선언적으로 정의할수 있는데, 이 템플릿은 렌더링되지 않지만, JavaScript를 사용하여 인스턴스화하고 문서에 추가할 수 있다.
• 특징:
  • 비 활성화: <template> 내의 코드는 바로 실행되거나 렌더링되지 않는다.
  • 재사용: 동일한 템플릿을 여러 번 인스턴스화하여 문서에 여러 번 추가할 수 있다.

 

HTML

<template id="custom-template">
  <p>Template Text content.</p>
</template>

 

JavaScript

const template = document.getElementById('custom-template').content;
const clone = document.importNode(template, true);
document.body.appendChild(clone);

 

웹 컴포넌트의 장점

1. 표준 기반: 웹 컴포넌트는 W3C에 의해 표준화된 웹 기술이기 때문에 주요 모던 브라우저들에서 네이티브로 지원되고 있다. 이로 인해 추가적인 라이브러리나 프레임워크 없이도 컴포넌트를 만들고 사용할 수 있게 된다.
2. 재사용성: 웹 컴포넌트는 캡슐화된 독립적인 단위로서, 다양한 웹 페이지나 애플리케이션, 심지어 다른 프레임워크에서도 쉽게 재사용할 수 있다.
3. 캡슐화: Shadow DOM을 이용하여 웹 컴포넌트의 내부 스타일과 로직을 외부로부터 격리시킬 수 있게 되는데, 이로 인해 컴포넌트간 스타일이나 스크립트의 충돌을 방지하며, 독립성을 보장받을 수 있다.
4. 확장성: Custom Elements를 이용하여 기존의 HTML 요소를 확장하거나, 완전히 새로운 요소를 생성할 수 있다. 이를 통해 웹 페이지나 애플리케이션에 필요한 특별한 기능이나 디자인 요소를 통합할 수 있게 된다.
5. 호환성: 웹 컴포넌트는 다양한 프레임워크와 라이브러리 (예: React, Vue, Angular 등)와 함께 사용될 수 있어 기존 프로젝트에 웹 컴포넌트를 손쉽게 통합할 수 있다.
6. 코드의 일관성: 웹 컴포넌트를 사용하면 웹 개발 전반에 걸쳐 일관된 구성 요소를 사용하게 되므로 개발 및 유지 보수 과정에서 일관성을 유지할 수 있다.
7. 향후 안정성: 웹 컴포넌트는 웹 플랫폼의 기본 부분으로서, 프레임워크의 변화나 라이브러리의 업데이트에 영향을 받지 않는 안정성을 제공한다.