웹 컴포넌트 소개

Jan 20 2023

웹 구성 요소는 개발자가 웹 응용 프로그램을 위해 재사용 가능한 모듈식 구성 요소를 만들 수 있도록 하는 표준화된 API 세트입니다. 이러한 구성 요소는 사용 중인 프레임워크나 라이브러리에 관계없이 모든 최신 웹 애플리케이션에서 사용할 수 있습니다.

webcomponents.org

웹 구성 요소는 네 가지 주요 API로 구성됩니다.

사용자 정의 요소: 이 API를 통해 개발자는 모든 웹 애플리케이션에서 사용할 수 있는 자신의 HTML 태그를 정의할 수 있습니다. HTMLElement사용자 정의 요소는 클래스를 확장하고 사용자 정의 요소의 동작과 모양을 정의하는 JavaScript 클래스를 사용하여 생성됩니다 .
Shadow DOM: 이 API를 사용하면 개발자는 애플리케이션의 기본 DOM 트리와 분리된 웹 구성 요소에 대한 별도의 DOM 트리를 만들 수 있습니다. Shadow DOM에 대한 변경 사항이 애플리케이션의 나머지 부분에 영향을 미치지 않으므로 이러한 격리를 통해 구성 요소를 보다 쉽게 유지 관리하고 스타일을 지정할 수 있습니다.
HTML 템플릿: 이 API를 통해 개발자는 동일한 콘텐츠의 인스턴스를 만드는 데 사용할 수 있는 HTML 템플릿을 정의할 수 있습니다. 템플릿은 메뉴 또는 목록과 같은 재사용 가능한 콘텐츠를 만드는 데 사용할 수 있으며 JavaScript를 사용하여 인스턴스화할 수 있습니다.
HTML 가져오기: 이 API를 사용하면 개발자가 외부 파일이나 URL에서 웹 구성 요소를 가져와 애플리케이션에 웹 구성 요소를 포함할 수 있습니다. 이렇게 하면 다른 HTML 요소처럼 가져오고 사용할 수 있으므로 다른 응용 프로그램에서 구성 요소를 쉽게 재사용할 수 있습니다.

https://caniuse.com/?search=web%20components

웹 구성 요소 만들기

웹 애플리케이션에서 웹 구성 요소를 사용하려면 Custom Elements API를 사용하여 고유한 사용자 지정 요소를 생성해야 합니다. 그런 다음 다른 HTML 요소와 마찬가지로 HTML에서 사용자 정의 요소를 사용할 수 있습니다.

다음은 이러한 API를 사용하여 재사용 가능한 간단한 구성 요소를 만드는 방법의 예입니다.

<template id="my-component-template">
  <style>
    /* Add some styling for our component */
    .my-component {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 20px;
    }
  </style>
  <div class="my-component">
    <slot></slot>
  </div>
</template>
<script>
  // Define our custom element
  class MyComponent extends HTMLElement {
    constructor() {
      super();
// Attach the shadow root to our element
      this.attachShadow({ mode: "open" });
// Import the template content into the shadow root
      const template = document.querySelector("#my-component-template");
      const instance = template.content.cloneNode(true);
      this.shadowRoot.appendChild(instance);
    }
  }
// Register our custom element
  customElements.define("my-component", MyComponent);
</script>

<my-component>Hello, World!</my-component>

<my-component color="#f00">Hello, World!</my-component>
<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      // ...
// Get the color attribute
      const color = this.getAttribute("color");
// Use the attribute to set the background color of the component
      this.shadowRoot.querySelector(".my-component").style.backgroundColor = color;
    }
  }
</script>

lit.dev

웹 구성 요소를 더 쉽게 만들고 사용할 수 있도록 추가 기능을 제공하고 개발 프로세스를 단순화하는 여러 프레임워크가 개발되었습니다. 이러한 프레임워크 중 하나는 LitElement입니다.

LitElement는 웹 구성 요소 API 위에 구축된 경량의 고성능 웹 구성 요소 프레임워크입니다. 웹 구성 요소를 만들기 위한 간단하고 표현력이 풍부한 API를 제공하며 효율적인 렌더링, 속성 관찰 및 이벤트 처리와 같은 기능을 포함합니다.

LitElement의 주요 기능 중 하나는 render개발자가 JavaScript를 사용하여 구성 요소의 템플릿을 선언적으로 설명할 수 있는 메서드를 사용한다는 것입니다. 이렇게 하면 구성 요소의 DOM 구조를 쉽게 만들고 업데이트할 수 있으며 복잡한 JavaScript 논리가 DOM을 조작할 필요가 없습니다.

다음은 LitElement를 사용하여 간단한 웹 구성 요소를 만드는 방법의 예입니다.

import { LitElement, html } from 'lit-element';

class MyComponent extends LitElement {
  static get properties() {
    return {
      message: { type: String }
    };
  }

  render() {
    return html`
      <p>${this.message}</p>
    `;
  }
}

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

updated()LitElement는 또한 및 수명 주기 메서드를 사용하여 속성 및 이벤트 처리를 처리하는 강력한 기능 세트를 제공하므로 shouldUpdate()속성을 기반으로 구성요소를 조건부로 업데이트할 수 있고 @click또는 와 같은 이벤트 핸들러를 사용할 수 있습니다 @input.

스타일링

Shadow DOM이 구성 요소의 스타일을 캡슐화하는 방식 때문에 웹 구성 요소의 스타일을 지정하는 것은 약간 까다로울 수 있습니다. 그러나 올바른 기술을 사용하면 구성 요소에 대해 아름답고 일관된 스타일을 만들 수 있습니다.

Shadow DOM의 주요 기능 중 하나는 웹 구성 요소의 스타일을 캡슐화하여 페이지의 나머지 부분에 영향을 주지 않는다는 것입니다. 이는 스타일 충돌을 방지하고 구성 요소의 스타일을 애플리케이션의 나머지 부분과 별도로 유지하는 데 유용하지만 구성 요소의 템플릿에 정의된 스타일이 구성 요소 외부에서 표시되지 않는다는 의미이기도 합니다.

웹 구성 요소의 스타일을 지정하려면 다음과 같은 몇 가지 옵션이 있습니다.

인라인 스타일 : 태그를 사용하여 구성 요소의 템플릿에 직접 스타일을 추가할 수 있습니다 style. 이는 간단한 구성 요소나 구성 요소에 소량의 사용자 지정 스타일을 추가하는 데 적합한 옵션입니다.

<template>
  <style>
    /* Define CSS classes for component */
    .my-component {
      background-color: #eee;
    }
    .my-component.highlight {
      background-color: #f00;
    }
  </style>
  <div class="my-component">...</div>
</template>
const component = document.querySelector('.my-component');
component.classList.add('highlight');

my-component:host {
 --component-bg-color: blue;
}

<link rel="stylesheet" href="my-component.css">h
:host .my-component {
  background-color: #eee;
}

웹 구성 요소를 생성하려면 사용자 정의 요소, Shadow DOM, HTML 템플릿 및 HTML 가져오기 API를 사용하여 구성 요소의 HTML, CSS 및 JavaScript를 정의하고 가져옵니다. 이러한 API를 사용하여 개발자는 새로운 HTML 요소를 만들고 해당 동작을 정의하고 스타일을 캡슐화하고 여러 구성 요소에서 HTML 템플릿 및 기타 리소스를 재사용할 수 있습니다.

웹 구성 요소의 스타일을 지정할 때 사용할 수 있는 몇 가지 옵션이 있습니다. 개발자는 필요에 따라 인라인 스타일, 외부 스타일시트를 사용하여 구성 요소의 스타일을 지정할 수 있습니다. 또한 개발자는 CSS 프레임워크를 사용하여 애플리케이션 전체에서 일관성을 유지할 수 있습니다.

전반적으로 웹 구성 요소는 재사용 가능한 모듈식 웹 UI 구성 요소를 만드는 강력하고 유연한 방법을 제공하며 올바른 기술을 사용하여 개발자는 구성 요소에 대해 아름답고 일관된 스타일을 만들 수 있습니다.

읽어 주셔서 감사합니다! 이 게시물이 도움이 되셨다면 Twitter 에서 저를 팔로우하여 웹 개발에 대한 더 많은 기술 정보와 업데이트를 받아보세요 .