웹 구성 요소

React, Angular, Vue 등과 같이 시중에 나와 있는 Front-end 프레임워크를 사용할 때마다 우리는 대부분 사용자 인터페이스를 구성 요소라고 하는 관리 가능한 더 작은 부분으로 나눕니다. 그러나 이러한 프레임워크를 사용하지 않고 UI를 구성 요소로 나눌 수 있는지 생각해 본 적이 있습니까?
이에 대한 대답은 예입니다. 그렇게 하는 데 도움이 되는 것은 웹 구성 요소입니다.

웹 구성 요소란 무엇입니까?

웹 구성 요소는 사용자 인터페이스를 구성 요소라고 하는 더 작은 블록으로 나눌 수 있는 특정 웹 API의 모음입니다. 구성 요소의 기능을 HTML 태그로 캡슐화하여 웹 앱 어디에서나 사용할 수 있습니다.
이제 당신은 그것이 훌륭하다고 생각할 수도 있지만 우리는 무언가를 설치해야 할 수도 있습니다.
이에 대한 대답은 "아니오"입니다. 웹 구성 요소를 만들기 위해 아무것도 설치할 필요가 없습니다. 이 모든 것이 Vanilla JavaScript에서 제공됩니다.
웹 구성 요소의 또 다른 흥미로운 기능은 나중에 React, Angular 및 Vue와 같은 다른 프레임워크와 함께 사용할 수 있다는 것입니다.

웹 구성 요소 기술

일부 HTML 태그 내에 캡슐화된 기능을 제공하기 위해 웹 구성 요소는 3가지 주요 기술을 사용합니다. 이러한 기술은 웹 앱의 어느 지점에서든 충돌 위험 없이 다양한 구성 요소를 만드는 데 도움이 됩니다.
이 3가지 주요 기술은 다음과 같습니다.

1. 사용자 정의 요소:- 사용자 정의 요소를 사용하면 자체 사용자 정의 HTML 요소를 만들거나 기존 HTML 요소를 확장하고 요구 사항에 따라 수정할 수 있습니다. 사용자 정의 요소를 생성하려면 HTMLElement 클래스를 확장하여 기존 HTML 태그의 기능을 정의하는 JavaScript 클래스를 생성해야 합니다. 사용자 지정 요소에는 요소가 통과할 이벤트를 정의하는 특정 수명 주기 메서드가 있습니다.
이러한 수명 주기 방법 중 일부는 다음과 같습니다.

생성자():- 일반 객체 지향 프로그래밍 언어의 생성자가 동작하는 것과 유사하게 동작합니다. 생성자 수명 주기 메서드는 요소의 인스턴스가 생성될 때 호출됩니다. 생성자 내에서 수행하는 가장 일반적인 작업은 상태 초기화, 이벤트 리스너 추가 등입니다.

connectedCallback():- 이 수명 주기 메서드는 요소가 DOM(Document Object Model)에 삽입될 때 호출됩니다.

disconnectedCallback():- 이 수명 주기 메서드는 요소가 DOM에서 제거될 때 언제든지 호출됩니다.

attributeChangedCallback():- 이 수명 주기 메서드는 요소에서 속성이 추가, 제거, 업데이트 또는 대체될 때 호출됩니다. 이 수명 주기 메서드는 3개의 매개변수 attributeName, oldValue 및 newValue를 허용합니다.

2. Shadow DOM: Shadow DOM을 사용하면 요소에 대한 "shadow"DOM을 캡슐화할 수 있습니다. 이것은 자체 포함된 구성 요소에 대한 스타일과 마크업을 캡슐화합니다. 이것은 우리 요소에 웹 페이지의 전체 DOM과 분리되도록 하는 고유한 ID를 제공합니다.
Shadow DOM은 페이지의 전체 전역 스타일 및 기능에서 구성 요소의 스타일 및 기능 충돌을 방지하는 데 도움이 됩니다. shadow DOM은 요소 이름과 함께 attachShadow 메서드를 사용하여 생성됩니다.

element_name.attachShadow({mode:open})

3. HTML 템플릿:- HTML 템플릿을 사용하면 웹 구성 요소의 캡슐화된 마크업을 정의할 수 있습니다. 템플릿 태그는 페이지에 마크업을 저장하고 구성 요소에 대한 HTML과 CSS를 모두 포함할 수 있습니다. 슬롯은 구성 요소에 사용자 정의 텍스트를 추가하는 데 사용됩니다. 템플릿과 슬롯 모두 렌더링된 페이지에 표시되지 않는 마크업을 작성할 수 있습니다.

이제 자체 웹 구성 요소를 생성해 보겠습니다. 고유한 웹 구성 요소를 만드는 방법에 대한 자세한 단계를 보려면 를 참조하십시오.