웹 구성 요소: 소개

현대 웹 개발에서는 프레임워크가 대세입니다. 거의 모든 최신 프레임워크에는 구성 요소라는 개념이 있습니다. 구성 요소의 기본 아이디어는 프런트엔드 로직을 페이지나 프로젝트 간에 공유할 수 있는 재사용 가능한 작은 덩어리로 나누는 것입니다. 일반적으로 이러한 구성 요소는 다른 프레임워크에서 재사용할 수 없으며 브라우저에서 실행할 수 있는 JavaScript로 컴파일하려면 빌드 프로세스가 필요합니다.

기본 JavaScript와 프레임워크 간에 공유할 수 있는 널리 사용되는 브라우저 API를 사용하여 구성 요소를 구축하는 방법이 있다고 말하면 어떨까요? 이제 이것이 웹 구성 요소의 현실이 되었습니다. 여기서는 다양한 유형의 웹 구성 요소와 이를 통해 사용할 수 있는 몇 가지 기능을 간략하게 살펴보겠습니다.

웹 구성요소의 기본

웹 구성요소는 사용자 정의 요소 레지스트리를 사용하여 정의됩니다. 이는 대부분의 최신 브라우저가 제공하는 API입니다. 웹 구성 요소를 만들려면 코드에서 정의한 다음 사용자 정의 요소 레지스트리에 등록하면 됩니다. 올바른 명명 규칙을 사용하여 등록하고 정의하면 해당 구성 요소를 페이지 내에서 사용할 수 있습니다.

customElements.define("my-component", MyComponentClass);

웹 구성 요소 유형

웹 구성 요소는 두 가지 범주로 나눌 수 있습니다. 자율 웹 구성 요소와 사용자 정의 내장 요소가 있습니다.

자율 웹 구성 요소는 일반 HTMLElement 클래스의 확장입니다. 이러한 구성 요소는 기본적으로 모든 동작을 처음부터 사용자 정의할 수 있는 기능을 사용하여 고유한 HTML 요소를 구축하므로 일반적으로 더 유연합니다. 여기에는 구성 요소 렌더링에 사용되는 루트 요소가 포함됩니다. 정의한 후에는 다른 HTML 요소와 마찬가지로 자율 웹 구성 요소를 사용합니다.

<my-button>



<p><strong>Custom Built-In Elements</strong> extend specific HTML elements.  For example, you may extend the HTMLButtonElement class or the HTMLAnchorElement.  These are meant to augment the functionality of existing HTML elements. To use a Custom Built-In element, you use the "is" attribute on the HTML element you are augmenting to tell it that it is an instance of the Web Component.<br>
</p>

<pre class="brush:php;toolbar:false"><button is="my-button">



<h3>
  
  
  Naming Web Components
</h3>

<p>When defining a Web Component, there are certain conventions that must be followed.  </p>

<p>Generally you will name your components similar to HTML elements with your own prefix attached to keep things simple (i.e. <my-button>).  The basic rules require that the element name start with a lowercase letter, and it must include a hyphen.  These guidelines will get you by for most cases, but I would recommend looking at the HTML spec if you're curious about all rules.<br>


<pre class="brush:php;toolbar:false"><!--Valid-->
<my-button/>
<your-button/>

<!--Invalid-->
<My-button/>
<1234-button/>
<Mybutton/>

수명주기 후크

웹 구성 요소에는 구성 요소가 거치는 다양한 단계에 반응하는 데 사용되는 특정 수명 주기 후크가 있습니다. 후크는 다음과 같습니다.

• connectedCallback -> 구성요소가 DOM에 연결되면 실행됩니다.
• disconnectedCallback -> 구성요소가 DOM에서 분리될 때 실행됩니다.
• AdoptedCallback -> 구성요소가 새 DOM에 연결될 때마다 실행됩니다.
• 속성ChangedCallback -> "observedAttributes" 목록의 속성이 업데이트될 때 실행됩니다.

class MyComponent extends HTMLElement {
    static observedAttributes = ["btntype"]
    connectedCallback() {
        // Handle when the component is attached to the DOM
    }
    disconnectedCallback() {
        // Handle when the component is removed from the DOM
    }
    adoptedCallback() {
        // Handle when the component is attached to a new DOM
    }
    attributeChangedCallback(name, oldValue, newValue) {
        // Trigged when the "btntype" attribute is changed since it is in the list of observedAttributes.
        // "name" will be the name of the attribute that changed.
        // "oldValue" is the value before the change.
        // "newValue" is the new value after the change.
    }
}

이러한 수명 주기 후크는 구성 요소 인스턴스를 생성/삭제할 때 필요한 초기화 또는 정리 작업을 수행하는 데 사용됩니다. attributeChangedCallback은 속성 값 업데이트에 반응할 수 있으므로 특히 유용합니다. 웹 구성 요소에는 attributeChangedCallback을 트리거하는 속성 이름(문자열)의 배열인 "observedAttributes"라는 특수 정적 속성이 있습니다.

접근성

접근성은 오늘날 수행되는 모든 웹 개발에서 중요한 고려 사항입니다. 웹 구성 요소의 경우 일반 HTML이나 프레임워크에서와 마찬가지로 ARIA 속성을 사용하지만 일반적으로 사용 중인 HTML 요소의 내장 역할과 접근성 기능을 상속하게 됩니다.

다른 곳과 마찬가지로 여기에도 동일한 지침이 적용됩니다. 예를 들어, 구성요소를 구축할 때 시맨틱 HTML을 사용하고 있는지 확인하고, 필요한 키보드 처리를 추가하고, 초점 및 색상 대비와 같은 항목이 제대로 관리되는지 확인하세요.

섀도우 DOM

Shadow DOM은 아마도 웹 구성요소 중 가장 혼란스럽고 논란이 많은 부분일 것입니다. Shadow DOM은 본질적으로 웹 구성 요소 내에 존재하는 별도의 범위로 지정된 DOM 부분입니다

사용자 정의 내장 요소는 단지 기존 HTML 요소에 추가되기 때문에 Shadow DOM은 주로 자율 웹 구성 요소의 관심사입니다. 자율 웹 구성 요소의 경우 요소(예: )를 나타내는 사용자 정의 태그는 "호스트" 요소로 간주됩니다. 호스트 요소 내에 "섀도우 루트"가 있습니다. 섀도우 루트 내에는 구성 요소의 마크업이 렌더링됩니다.

다음은 내부에 Shadow DOM이 있는 "my-button" 요소를 호스트로 볼 수 있는 예입니다.

웹 구성 요소를 구축할 때 Shadow DOM을 설정할 수 있는 두 가지 모드가 있습니다. 이러한 모드는 "열림"과 "닫힘"입니다. 개방형 Shadow DOM은 Light DOM의 Shadow Root 외부에서 JavaScript를 사용하여 액세스할 수 있지만 폐쇄형 Shadow DOM은 액세스할 수 없습니다.

customElements.define("my-component", MyComponentClass);

Shadow DOM 내에서 정의하는 모든 스타일은 Shadow DOM 내에서 범위가 지정되며 문서의 나머지 부분을 오염시키지 않습니다. "Light DOM"(문서의 나머지 부분)에 정의된 스타일은 Shadow DOM을 관통하지 않습니다(CSS 변수는 예외이지만 여기서는 이에 대해 다루지 않습니다). 최신 브라우저는 CSS를 사용하여 Light DOM에서 직접 Shadow DOM을 대상으로 지정하는 방법을 제공합니다. 마크업에 부분 속성을 추가하여 구성 요소의 Shadow DOM에 부분을 추가할 수 있습니다. 그런 다음 ::part 의사 선택기를 사용하여 CSS에서 해당 부분을 타겟팅할 수 있습니다. 이는 매우 편리하지만 특성상 꽤 제한적입니다. ::part 선택기에서 하위 선택기를 연결할 수 없습니다. Shadow DOM 내에서 "part" 속성이 있는 특정 요소만 타겟팅할 수 있습니다.

Shadow DOM 작업 시 접근성도 중요한 고려 사항입니다. ARIA 속성을 사용해 본 적이 있다면 "aria-describedby" 및 "aria-labelledby"에 익숙할 것입니다. 이는 일반적으로 화면 판독기 콘텐츠의 레이블이나 설명이 포함된 다른 요소를 참조하는 ID가 부여됩니다. Shadow DOM은 스타일과 유사하게 별도로 ID 범위를 유지하므로 Light DOM에서 Shadow DOM 내에 있는 ID를 참조할 수 없으며 그 반대의 경우도 마찬가지입니다. 이는 동적으로 제공해야 하는 자세한 설명을 제공하려고 할 때 어려울 수 있지만 이 소개에서는 다루지 않을 해결 방법이 있습니다.

템플릿 및 슬롯

템플릿과 슬롯은 웹 구성 요소를 향상하기 위해 Shadow DOM과 함께 사용할 수 있는 도구입니다. 템플릿은 웹 구성 요소 내에서 재사용 가능한 조각을 만드는 데 사용되는 반면, 슬롯은 Light DOM의 콘텐츠가 전달될 수 있는 "구멍"을 노출하는 데 사용됩니다.

웹 구성 요소 내에서 반복해서 렌더링해야 하는 HTML 조각이 있는 경우 템플릿이 유용합니다. 웹 구성 요소 외부에서도 사용할 수 있지만 사용 사례가 더 제한적입니다. "템플릿" 태그를 사용하여 구현됩니다.

슬롯은 Light DOM의 콘텐츠를 웹 구성 요소로 전달하는 데 사용되며 "슬롯" 태그를 사용하여 구현됩니다. 이는 동적 콘텐츠를 전달해야 하는 일반 구성 요소가 있는 경우 유용합니다. 카드 본문에 마크업을 전달하기 위해 슬롯을 노출할 수 있는 일반 카드 구성 요소가 좋은 예일 수 있습니다. 슬롯에는 슬롯을 고유하게 식별하기 위해 제공할 수 있는 "이름" 속성이 있습니다. 이는 웹 구성 요소에 여러 슬롯을 배치해야 하는 경우 유용합니다. 콘텐츠를 전달할 때 간단히 Slot="your-slot-name" 값을 가진 속성을 전달하면 콘텐츠가 일치하는 이름의 슬롯에 전달됩니다.

슬롯과 Shadow DOM은 주목할 만한 독특한 상호 작용을 가지고 있습니다. 슬롯에는 아무것도 전달되지 않은 경우 렌더링되는 기본 콘텐츠가 있을 수 있습니다. 슬롯에 전달된 콘텐츠는 Light DOM 내에 있으며 Shadow DOM에 "얕게 복사"됩니다. 브라우저 검사기에서 이를 시각적으로 확인할 수 있습니다. 슬롯 콘텐츠는 웹 구성 요소 내에서 렌더링되지만 DOM에서는 콘텐츠가 기술적으로 웹 구성 요소 외부에 위치하며 슬롯에 대한 링크를 제공합니다.

즉, 모든 슬롯 콘텐츠는 Light DOM 내의 다른 콘텐츠와 마찬가지로 스타일이 지정되고 참조된다는 의미입니다. Light DOM 내의 스타일은 슬롯 콘텐츠에 영향을 미치는 반면 Shadow DOM 스타일은 영향을 미치지 않습니다. 웹 구성 요소 내에서 슬롯 콘텐츠와 상호 작용하는 데 사용할 수 있는 API가 있습니다.

웹 구성 요소 지원

웹 구성 요소는 최신 브라우저에서 상당히 잘 지원됩니다. 주요 예외는 맞춤 내장 요소를 지원하지 않는 Safari입니다. Internet Explorer 11과 같은 이전 브라우저를 지원해야 하는 경우 몇 가지 사항을 폴리필해야 합니다.

기본 예

이제 기본 개념을 모두 간략하게 소개했으니 이제 몇 가지 예를 살펴보겠습니다.

자율적인 맞춤 요소

다음은 "my-button"이라는 자율적 맞춤 요소의 예입니다.

customElements.define("my-component", MyComponentClass);

가장 먼저 눈에 띄는 점은 코드가 거의 동일하다는 점입니다. 가장 큰 차이점은 HTMLButtonElement를 직접 확장한 다음, 맞춤 요소를 정의할 때 버튼을 확장한다고 선언한다는 점입니다.

또한 요소 렌더링을 위한 코드를 작성하는 데 소요되는 시간도 훨씬 단축되었습니다. HTMLButtonElement를 확장하므로 구성 요소는 추가 기능을 갖춘 HTML 버튼일 뿐입니다. HTML "is" 속성을 사용하여 HTML 버튼에 "my-button"임을 알립니다.

실시간 예시는 다음과 같습니다.

기존 HTML 버튼 요소를 보강하기 위해 "is" 속성을 사용하고 있음을 다시 한 번 알 수 있습니다. 또한 Autonomous 사용자 정의 요소와 마찬가지로 이벤트 리스너를 연결하고 다른 HTML 요소에 대해 했던 것처럼 버튼으로 작업할 수 있다는 점을 알 수 있습니다. 이는 문자 그대로 확장된 HTML 버튼이기 때문에 어쨌든 여기에서 더 의미가 있습니다.

마무리

웹 구성 요소는 다양한 페이지와 프로젝트에서 재사용할 수 있는 공유 가능한 구성 요소를 만드는 문제를 해결하는 기본적인 방법입니다. 이는 일반 HTML 요소와 더 유사하게 작동하여 약간의 혼란을 야기할 수 있지만 결국에는 매우 유용할 수 있으며 최신 프레임워크가 목표로 하는 것과 동일한 많은 문제를 해결하는 데 도움이 될 수 있습니다.

여기에서는 웹 구성요소에 대한 소개와 이를 둘러싼 다양한 개념, 그리고 기본 기능을 보여주는 몇 가지 간단한 예를 살펴보았습니다. 여기에서 더 쉽게 구축하고 사용할 수 있는 방법에 대해 더 자세히 알아보고 몇 가지 문제점을 처리할 수 있는 방법을 살펴볼 수 있습니다.

관심이 있으시면 GitHub에서 예제를 보거나 Code Pen에서 사용해 보실 수 있습니다.

• 자율 커스텀 요소 예시
• 맞춤형 내장 요소 예시
• 보너스 기본 템플릿 예시!

다음 글에서는 템플릿과 슬롯 사용을 확장하는 방법과 렌더링을 더 쉽게 만드는 방법을 살펴보겠습니다. 계속 지켜봐주세요!

위 내용은 웹 구성 요소: 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!