웹 컴포넌트 - Web API | MDN
MDN Web Docs
웹 표준 기술로 구현하는 웹 컴포넌트(Web Components)
웹 컴포넌트(Web Components)는 웹 개발에서 코드의 재사용성을 높이고 컴포넌트의 캡슐화를 실현하기 위한 기술입니다.
전통적인 웹 표준에서는 코드의 재사용이 쉽지 않았는데요. 웹 컴포넌트는 웹 표준 기술을 사용하여 컴포넌트를 재사용할 수 있도록 합니다. 이는 개발 효율성을 높이고 코드의 유지보수성을 향상시키는 데 도움이 되는데요.
웹 컴포넌트는 다음과 같은 주요 개념으로 구성됩니다:
사용자 정의 요소(Custom Elements): 개발자가 직접 정의한 HTML 태그와 해당 태그의 동작을 나타내는 API입니다. 이를 통해 커스텀 엘리먼트를 생성하고 활용할 수 있습니다.
섀도우 DOM(Shadow DOM): 컴포넌트의 내부 구조와 스타일을 외부로부터 격리시키는 기술입니다. 이를 통해 컴포넌트의 기능을 프라이빗하게 유지할 수 있으며, 다른 부분의 스타일과 충돌하지 않도록 보장합니다.
HTML 템플릿(HTML Templates): 컴포넌트의 구조를 정의하는 마크업 템플릿입니다. 이 템플릿은 렌더링된 페이지에 직접 나타나지 않으며, 컴포넌트가 인스턴스화될 때 사용됩니다.
웹 컴포넌트는 자바스크립트의 클래스 문법을 사용하여 구현됩니다. 또한, 리액트나 뷰와 유사하게 라이프사이클 메서드를 제공하여 컴포넌트의 생성, 업데이트, 제거 등의 과정을 제어할 수 있습니다. 웹 컴포넌트는 웹 표준 기술이기 때문에 별도의 라이브러리나 프레임워크 없이 사용할 수 있다는 장점이 있습니다.
다음은 간단한 웹 컴포넌트 코드 예제입니다:
<script>
class SimpleGreeting extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `<p>안녕하세요 웹컴포넌트 예제입니다!</p>`;
}
}
customElements.define('simple-greeting', SimpleGreeting);
</script>
</head>
<body>
<simple-greeting></simple-greeting>
</body>웹 컴포넌트는 클래스 문법을 사용하기 때문에 익숙하지 않은 개발자에게는 다소 복잡해 보일 수 있을것 같은데요. 또한, 현재 리액트나 뷰와 같은 인기 있는 라이브러리가 널리 사용되고 있어 웹 컴포넌트가 이들을 완전히 대체하기는 쉽지 않을것 같습니다.
하지만 웹 컴포넌트의 가장 큰 장점은 웹 표준 기술을 사용하여 컴포넌트를 구현할 수 있기 때문에 라이브러리 사용이 제한된 특수한 환경이나 간단한 컴포넌트 구현이 필요한 상황에서 유용하게 활용될 수 있을것 같습니다.
https://developer.mozilla.org/ko/docs/Web/API/Web_components
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 5월 9일 오전 12:53