[javascript] 웹 컴포넌트로 구현 가능한 다양한 UI 컴포넌트 예시

07 Dec 2023

javascript

웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 UI 컴포넌트를 만들기 위한 기술입니다. 이를 통해 우리는 쉽게 커스터마이즈 가능한 UI 컴포넌트를 개발하고, 해당 컴포넌트를 다른 프로젝트에서 재사용할 수 있습니다. 이번 포스팅에서는 JavaScript 기반의 웹 컴포넌트를 사용하여 구현 가능한 다양한 UI 컴포넌트 예시를 살펴보겠습니다.

1. 버튼 컴포넌트

버튼은 웹 애플리케이션에서 가장 일반적으로 사용되는 UI 요소 중 하나입니다. 웹 컴포넌트를 사용하면 버튼 컴포넌트를 쉽게 만들 수 있습니다. 예를 들어, 아래와 같이 button 엘리먼트를 상속하여 커스텀 버튼 컴포넌트를 만들 수 있습니다.

class CustomButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', () => {
      this.style.backgroundColor = 'blue';
    });
  }
}

customElements.define('custom-button', CustomButton, { extends: 'button' });

이제 <custom-button> 엘리먼트를 사용하여 커스텀 버튼을 생성할 수 있습니다. 이 버튼을 클릭하면 배경색이 파란색으로 변경됩니다.

2. 모달 컴포넌트

모달은 사용자에게 추가 정보를 제공하거나 작업을 수행하기 위해 일시적으로 표시되는 UI 요소입니다. 웹 컴포넌트를 사용하여 모달 컴포넌트를 만들면 다른 프로젝트에서 재사용하기 용이합니다. 예를 들어, 아래와 같이 div 엘리먼트를 상속하여 커스텀 모달 컴포넌트를 만들 수 있습니다.

class CustomModal extends HTMLDivElement {
  constructor() {
    super();

    // 모달 내용 추가
    const content = document.createElement('p');
    content.textContent = '모달 내용';
    this.appendChild(content);

    // 닫기 버튼 추가
    const closeButton = document.createElement('button');
    closeButton.textContent = '닫기';
    closeButton.addEventListener('click', () => {
      this.style.display = 'none';
    });
    this.appendChild(closeButton);
  }
}

customElements.define('custom-modal', CustomModal, { extends: 'div' });

이제 <custom-modal> 엘리먼트를 사용하여 커스텀 모달을 생성할 수 있습니다. 생성된 모달에는 내용과 닫기 버튼이 함께 표시되며, 닫기 버튼을 클릭하면 모달이 사라집니다.

3. 탭 컴포넌트

탭은 여러 개의 컨텐츠 중에서 하나만 활성화되도록 하는 UI 컴포넌트입니다. 웹 컴포넌트를 사용하여 탭 컴포넌트를 만들면 간편하게 다양한 페이지에서 재사용할 수 있습니다. 예를 들어, 아래와 같이 div 엘리먼트를 상속하여 커스텀 탭 컴포넌트를 만들 수 있습니다.

class CustomTabs extends HTMLDivElement {
  constructor() {
    super();

    const tabs = Array.from(this.querySelectorAll('div.tab'));
    const contents = Array.from(this.querySelectorAll('div.content'));

    tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => {
        // 선택된 탭 스타일 변경
        tabs.forEach((tab) => tab.classList.remove('active'));
        tab.classList.add('active');

        // 선택된 컨텐츠 표시
        contents.forEach((content) => content.style.display = 'none');
        contents[index].style.display = 'block';
      });
    });
  }
}

customElements.define('custom-tabs', CustomTabs, { extends: 'div' });

위 코드를 사용하여 <custom-tabs> 엘리먼트를 생성하면 탭과 해당 컨텐츠가 함께 표시됩니다. 탭을 클릭하면 해당 탭이 활성화되고 해당 컨텐츠가 표시됩니다.

결론

이 포스팅에서는 웹 컴포넌트를 사용하여 다양한 UI 컴포넌트(버튼, 모달, 탭)를 구현하는 예시를 살펴보았습니다. 웹 컴포넌트를 사용하면 재사용 가능한 컴포넌트를 손쉽게 만들고, 해당 컴포넌트를 다른 프로젝트에서도 재사용할 수 있습니다. 이러한 장점을 활용하여 웹 개발을 더욱 효율적으로 진행할 수 있습니다.

[자세한 내용 참조]: