웹 컴포넌트(Web Component)로 나만의 클릭 버튼 만들기

웹 개발을 하다 보면 재사용 가능한 UI 요소를 구현해야 할 때가 많습니다. 이런 상황에서 웹 컴포넌트(Web Component)는 매우 유용한 도구입니다. 오늘은 간단한 '클릭 버튼'을 만드는 예제를 통해 웹 컴포넌트를 소개하겠습니다.

웹 컴포넌트란?

웹 컴포넌트는 HTML, CSS, 그리고 JavaScript를 조합해 캡슐화된 재사용 가능한 UI 요소를 만드는 기술입니다. 이 기술을 사용하면 다른 페이지나 프로젝트에서도 손쉽게 가져다 쓸 수 있는 독립적인 컴포넌트를 생성할 수 있습니다.

클릭 버튼 구현하기

아래는 'ClickButton'이라는 이름의 웹 컴포넌트를 구현하는 두 가지 방법입니다.

첫 번째 방법: 클래스를 직접 정의하기

class ClickButton extends HTMLElement {
  constructor() {
    super(); // 항상 super()를 먼저 호출해야 합니다.
    this.shadow = this.attachShadow({ mode: 'open' });

    const buttonElement = document.createElement('button');
    buttonElement.innerHTML = 'Click me';
    const myButtonEl = this.shadow.appendChild(buttonElement);

    myButtonEl.addEventListener('click', () => {
      alert('Button clicked!');
    });

    this.button = buttonElement;
  }
}

customElements.define('click-button', ClickButton);

이 코드는 HTML의 `` 태그로 재사용 가능한 버튼을 생성합니다. 버튼을 클릭하면 'Button clicked!'라는 메시지가 나타납니다.

두 번째 방법: 더 간결한 접근법

customElements.define('click-button', class extends HTMLElement {
  constructor() {
    const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
    super() // 'this'를 설정하고 반환합니다.
      .attachShadow({ mode: 'open' }) // this.shadowRoot를 설정하고 반환합니다.
      .append(
        this.button = createElement('button', {
          innerHTML: 'Click me',
          onclick: (evt) => alert('Button clicked!', this.nodeName)
        })
      );
  }
});

이 방식은 코드가 더 간결하며, createElement 함수를 사용해 HTML 요소를 생성하고 속성을 동적으로 설정합니다.

웹 컴포넌트의 장점

1. 재사용성: 한 번 작성한 컴포넌트를 여러 프로젝트에서 재사용 가능.
2. 캡슐화: Shadow DOM을 통해 스타일과 동작을 격리.
3. 모듈화: 코드 유지보수가 쉬워짐.

마무리

웹 컴포넌트를 사용하면 UI 요소를 더 효율적으로 개발할 수 있습니다. 위 예제를 통해 기본적인 사용법을 익혔다면, 이제 더 복잡한 컴포넌트를 만들어 보세요. 웹 컴포넌트는 모던 웹 개발에서 점점 더 중요한 역할을 하고 있습니다.

웹 컴포넌트에 대해 더 알아보고 싶다면? 여기에서 원문을 확인해보세요!

웹 컴포넌트를 활용해 더욱 멋진 UI를 만들어 보세요!