프런트엔드 개발자라면 프레임워크등을 사용하여 컴포넌트를 만드는 것은 익숙 할 것이다. 뭐 물론 백엔드 개발자라고 하더라도, custom tag를 정의 해 본 사람도 있을 것이다. 오늘은 프레임 워크없이 우리가 컴포넌트라고 부를수 있을 만한 custom element를 정의를 해볼 것이다.
Window.customElements
window의 기본객체에는 위와 같은 객체가 있다. 이름만 보더라도 아 새로운 element를 등록하기 위해서 만들어진 것이구나 생각 할 수 있을 것이다. 그러면 지원하는 함수들을 한번 확인해보자.
define, get, upgrade, whenDefined
define: 우리가 이번 포스트에서 주로 살펴볼 함수이다. 커스텀 엘리먼트를 정의 하는 함수라고 볼수 있다.
* document.registerElement와 유사한 행위를 하지만 document.registerElement는 deprecated이니 사용 하지 말자.
get: 특정이름으로 정의 된 커스텀 엘리먼트의 클래스를 반환한다.
upgrade: 특정 dom의 트리를 정의한 커스텀 엘리먼트로 업그레이드 한게 된다.
whenDefined: 특정이름의 컴포넌트가 정의 될때 알 수 있도록 promise를 제공한다.
=> 이는 미리 html을 로드후 정의 되지 않은 엘리먼트를 특정 시점에 upgrade를 하거나 대치 할 수 있도록 정의 필요 할 것으로 보인다.
Window.customElements.define
window의 기본객체에는 위와 같은 객체가 있다. 이름만 보더라도 아 새로운 element를 등록하기 위해서 만들어진 것이구나 생각 할 수 있을 것이다. 그러면 지원하는 함수들을 한번 확인해보자.
커스텀 엘리먼트를 정의 하는 것은 어렵지 않다.
<html>
<head>
<script>
class TestElement extends HTMLElement {
connectedCallback() {
this.innerText = new Date()
}
}
window.customElements.define('test-element', TestElement)
</script>
</head>
<body>
<test-element></test-element>
</body>
</html>
위의 코드는 해당 태그가 문서에 연결되는 순간 해석이 된다.
마무리
customElement에 대한 내용을 다루려면 꽤나 많은 내용을 필요로 한다. 이미 프레임워크들이 많이 나와있는 상태에서 customElement를 정의 하는 법을 배우는 것이 맞을까? 라는 생각이 들기도 하지만, 뭐 누가 알겠는가? 프레임워크나 라이브러리를 만들게 될수도 있고, 프레임워크와의 가장 큰 차이는 엘리먼트를 정의를 하는 것이기 때문에 해당 태그를 요소에서 직접 확인이 가능하다.
위의 형식은 아래처럼 div로만 이루어진 html을 제공하는 것보다 좋은 대안이 될 것이라 생각한다.
댓글
댓글 쓰기