Web Components: 커스텀 엘리먼트의 이해와 활용

핵심 기술

Web Components는 브라우저 네이티브 기능을 활용하여 재사용 가능하고 캡슐화된 커스텀 HTML 엘리먼트를 생성하는 기술입니다. 이 글은 특히 커스텀 엘리먼트의 정의, 브라우저 파싱 방식, CSS 및 JavaScript 연동, 그리고 컴포넌트의 동작 방식을 중심으로 설명합니다.

기술적 세부사항

• 커스텀 엘리먼트의 등장 배경: HTML5 이후 새로운 시맨틱 엘리먼트 추가가 드물어, <div> 등의 추상화에서 벗어나 의미있는 재사용 가능한 컴포넌트를 만들기 위해 필요합니다.
• 커스텀 엘리먼트 명명 규칙: 모든 커스텀 엘리먼트 이름에는 최소한 하나의 하이픈(-)이 포함되어야 합니다. 이는 브라우저가 해당 엘리먼트를 '알 수 없는(unknown)' 엘리먼트가 아닌, 개발자가 책임지는 커스텀 엘리먼트로 인식하게 합니다.
• 브라우저 파싱: 브라우저는 인식하지 못하는 태그를 HTMLUnknownElement로 초기화하고 내용을 텍스트로 렌더링합니다. 커스텀 엘리먼트의 하이픈 규칙은 이를 HTMLElement로 파싱하게 하여 일반적인 엘리먼트처럼 CSS 및 JavaScript로 접근 가능하게 합니다.
• JavaScript 연동: document.querySelector()로 접근 가능하며, instanceof HTMLElement로 확인할 수 있습니다. addEventListener와 같은 HTMLElement의 모든 기본 기능을 활용할 수 있습니다.
• 커스텀 엘리먼트 등록: customElements.define() 메소드를 사용하여 클래스를 특정 태그 이름에 연결합니다. 이를 통해 엘리먼트의 로직을 해당 클래스에 직접 내장할 수 있어, DOM 파싱 후 외부 스크립트로 엘리먼트를 찾는 과정이 불필요해집니다.
• 생명주기 콜백: 글에서는 constructor가 컴포넌트의 핵심 기능을 설정하기에 좋은 위치임을 강조하며, connectedCallback보다 우선적으로 고려될 수 있음을 시사합니다. 이는 DOM 연결 전에 엘리먼트 인스턴스를 즉시 설정할 수 있게 합니다.
• 캡슐화와 프라이빗 메소드: 클래스 내 #private 메소드를 사용하여 컴포넌트의 내부 기능을 보호할 수 있으며, 이는 향후 Shadow DOM과의 연계를 통해 더욱 중요해질 것입니다.
• 모듈화: 컴포넌트 클래스를 모듈로 내보내(export) 다른 스크립트에서 가져와(import) 재사용할 수 있습니다.
• 자식 엘리먼트 처리: MutationObserver를 사용하여 엘리먼트의 자식 변화를 감지하고, constructor에서 이벤트 핸들러를 설정하여 DOM에 추가되기 전에 컴포넌트가 즉시 동작하도록 할 수 있습니다.

개발 임팩트

Web Components는 빌드 도구나 프레임워크 의존성 없이 순수 Vanilla JS, CSS, HTML만으로 모듈화되고 재사용 가능한 컴포넌트를 만들 수 있게 하여 개발 생산성을 향상시킵니다. 또한, 표준 기술이므로 다양한 환경에서 호환성이 높습니다.

커뮤니티 반응

(원문에 커뮤니티 반응에 대한 구체적인 언급은 없습니다.)