[javascript] 자바스크립트 웹 컴포넌트를 구현하는 방법

07 Dec 2023

javascript

웹 개발에서 컴포넌트는 코드를 구성하고 재사용 가능한 요소로 분리하는 데 중요한 역할을 합니다. 이러한 컴포넌트 기반 접근 방식은 코드의 가독성과 유지 보수성을 향상시키는 데 도움이 됩니다. 이 문서에서는 JavaScript를 이용하여 웹 컴포넌트를 구현하는 방법을 설명하겠습니다.

웹 컴포넌트 개요

웹 컴포넌트는 웹 애플리케이션 내에서 독립적으로 작동하며 재사용 가능한 UI 요소입니다. 이러한 컴포넌트는 캡슐화되어 있으며, 외부 요소와 독립적으로 스타일링 및 동작할 수 있습니다. 웹 컴포넌트는 4가지 기본 요소로 구성됩니다.

커스텀 엘리먼트 (Custom Elements): 기존 HTML 엘리먼트와 사용자 정의 엘리먼트를 만들 수 있습니다.
쉐도우 돔 (Shadow DOM): 컴포넌트의 스타일 및 동작을 캡슐화하기 위해 사용되며, 컴포넌트 내부에서만 접근 가능한 완전히 독립된 돔 트리를 제공합니다.
HTML 템플릿 (HTML Templates): 컴포넌트의 구조를 정의하기 위해 사용되는 HTML 마크업입니다.
HTML 임포트 (HTML Imports): 다른 컴포넌트 파일들을 가져와 재사용할 수 있게 해줍니다.

자바스크립트를 사용한 웹 컴포넌트 구현

아래는 자바스크립트를 사용하여 웹 컴포넌트를 구현하는 간단한 예시입니다.

// 커스텀 엘리먼트 정의
class MyComponent extends HTMLElement {
  constructor() {
    super();
    // Shadow DOM 생성
    this.attachShadow({ mode: 'open' });
    // 템플릿 가져오기
    const template = document.getElementById('my-component-template');
    // 가져온 템플릿 내용을 Shadow DOM에 추가
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

// 커스텀 엘리먼트 등록
customElements.define('my-component', MyComponent);

위 예시에서는 MyComponent라는 커스텀 엘리먼트를 정의하고, 생성자에서 Shadow DOM을 생성하고 외부에서 가져온 템플릿을 내부에 추가합니다. 그리고 customElements.define를 사용하여 커스텀 엘리먼트를 등록합니다.

웹 컴포넌트 사용

등록한 웹 컴포넌트를 사용하려면 HTML에서 해당 엘리먼트를 사용하면 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>웹 컴포넌트 사용 예시</title>
  <script src="my-component.js" type="module"></script>
</head>
<body>
  <my-component></my-component>
</body>
</html>

위 코드에서 my-component.js는 웹 컴포넌트를 정의한 스크립트 파일을 로드합니다. 그리고 <my-component></my-component>를 통해 웹 컴포넌트를 사용할 수 있습니다.

이렇게 자바스크립트를 사용하여 웹 컴포넌트를 구현하고 사용할 수 있습니다. 웹 컴포넌트를 사용하면 코드의 재사용성과 유지 보수성을 향상시킬 수 있으며, 웹 애플리케이션의 모듈화를 쉽게 구성할 수 있습니다.

웹 컴포넌트 개요

자바스크립트를 사용한 웹 컴포넌트 구현

웹 컴포넌트 사용

참고 자료