web component API 사용기 (1) _그게 뭔데?

아주 바쁜 나날을 보내고 있다. 

아주아주 바쁘고 빡세지만 또 그만큼 엄청난 성취감과 재미로 가득찬 하루들이다! 

우아한테크캠프 2주차 미션은 vanilla js 으로 '투두 리스트 구현하기' 였다.

( 우리가 가볍게 생각하는 그 투두 리스트(?)가 아닌 트렐로, 지라 등 협업 도구에서 사용하는 칸반 보드 형태의 투두 리스트 였다 ㅎㅎ..🙄 )  

 

우리 팀은 프로젝트에 web component를 도입하였고, 이 경험은 우리에게 새로운 도전이였기 때문에 그 과정에서 겪었던 문제들과 배운점들을 기록하고자 한다. 

 

web component 란? 

웹 구성 요소는 코드의 나머지 부분에서 캡슐화된 기능을 사용하여 재사용 가능한 사용자 지정 요소를 만들고 웹 앱에서 활용할 수 있도록 하는 다양한 기술 모음  - mdn

mdn 공식 문서를 살펴보면 web component에 대해 위와 같이 설명하고 있다. 말 그대로 vanilla js 기반의 컴포넌트 개발을 할 수 있도록 지원해주는 기술이다. 

 

사용자가 직접 컴포넌트를 정의하고, 정의한 컴포넌트를 페이지 내에서 재사용할 수 있다. 

react와 같은 라이브러리를 이용한 분들에게는 어딘가 익숙한 그림이 그려질 것이다. 이전의 전통적인 마크업 방식을 생각해보면 페이지를 구성하는 UI 요소들이 재사용하기 힘든 구조라 복잡하고 비효율적이였는데 web component를 사용하면 react에서 사용하던 방식 처럼 컴포넌트를 만들어 재사용할 수 있다는 것이다! 

 

web component 는 사용자 정의 컴포넌트를 생성할 수 있도록 몇가지 기술적 특징을 가지고 있다. 

•  custom element
•  shadowDOM
•  HTML <template>, <slot>

먼저 custom element 부터 살펴보자🔥

custom element 

페이지에 사용자 정의 요소를 등록하기 위해 사용하는 API 이다. 

coustomElementRegistry.define('부여할 요소 이름', '요소의 동작을 정의하는 class 객체', '속성이 포함된 옵션')

coustomElementRegistry.define() 메서드를 사용하여 요소를 정의한다. 

이때 부여할 요소의 이름은 kebab-case를 사용하여 두 단어를 조합한 이름이여야한다! ( HTML 기본 태그와의 충돌 방지 ) 

//요소의 작동방식 및 UI 틀을 만드는 클래스 정의
class CustomButton extends HTMLElement{
	constructor(){
    	super()
    }
    //shadowDOM 을 사용하기 위해 mode 'open'해줌
    this.attachShadow({mode:'open'})
    
    const wapper = document.createElement('div')
    wapper.setAttribute('class', 'wapper')
    
    const icon = wapper.appendChild(document.creatElement('span')
    
    //shadowRoot에 wrapper 요소를 넣어줌
    this.shadowRoot.append(wrapper)
}

//나는 CustomButton 기반의 컴포넌트를 icon-button 이라는 이름으로 정의할께~ 
customElements.define('icon-button', CustomButton);

//내가 정의한 요소는 아래와 같이 태그로 사용해주면 된다. 
<icon-button> </icon-button>

대략 위와 같은 구조로 사용자 정의 요소를 사용할 수 있다. 

그럼 이제 사용자 정의 요소의 class 객체를 정의하며 사용한 shadowDOM 이란 무엇인지 궁금할 것이다. 

 

shadowDOM

shadowDOM 은 내가 정의한 요소를 캡슐화 하기 위한 개념이다. 요소의 style, html 들의 기능을 비공개로 유지함으로써 문서 안의 다른 요소들과 충돌할 염려 없이 스크립트를 작성하고 스타일을 지정할 수 있다. 

처음에는 이 설명이 이해가 잘 안될 수도 있다. 내가 한번에 이해할 수 있던 예시가 있다. 

<input type='range'/>

input 태그에 type을 'range'로 설정하면 어떤 요소가 출력될까? 

range input 의 기본 UI가 출력된다. 

<input type="range"/>

이제 개발자도구 오른쪽 상단의 톱니바퀴 설정 버튼을 눌러 설정을 바꿔보자. 

preferences 탭의 Elements 부분을 보면 'show user agent shadow DOM' 이 있다. 이 옵션을 체크해주면 개발자도구에서 숨겨져 있던 shadow DOM 내부 요소들을 볼 수 있다. 

#shadow-root 가 보이고 클릭하면 그동안 숨겨져 있던 요소들이 보인다. 

range type의 input 요소는 3개의 div 요소로 이루어져 있는 걸 확인할 수 있다. 

이렇게 shadowDOM 을 사용하면 내부 요소의 className 으로 'thumb'를 사용했어도 외부에서 사용한 'thumb'과 충돌하지 않고 독립적으로 동작할 수 있게 된다. 

출처:https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

shadowDOM mdn 문서에서 볼 수 있는 shadowDOM 구조이다. 일반 DOM에 연결되어 있는 shadow host 내부에 shadow tree가 있고, shadow tree의 루트 노드를 shadow root라고 한다. 

 

아까 예시에서 봤던 <icon-button> 은 shadow host, CustomButton의 가장 최상단 요소인 wrapper div 를 shadow root라고 볼 수 있다! 

 

attachShadow({mode:'open'}) 을 통해 사용자 정의 요소를 shadow Root에 연결할 수 있다. 

shadow.appendChild(요소)  또는 shadow.append(요소1, 요소2, ...) 생성한 모든 요소를 shadow Root에 연결할 수 있다.

 

다음 포스팅에서는 web component를 <template>, <slot> 을 사용하여 생성하는 방법과 실제로 프로젝트에 사용했던 custom component 에 대해 이야기 해보겠다. 💫