프론트엔드 노트

웹 컴포넌트를 활용한 재사용 가능한 버튼 제작 튜토리얼 ==========

프론트엔드 개발에서 UI 구성 요소의 재사용성은 매우 중요합니다. 특히 버튼과 같은 기본적인 UI 구성 요소는 다양한 페이지와 애플리케이션에서 자주 사용됩니다. 이번 글에서는 웹 컴포넌트를 활용하여 재사용 가능한 버튼을 만드는 방법을 다루겠습니다. 이 튜토리얼을 통해 버튼의 스타일과 기능을 손쉽게 커스터마이징할 수 있습니다.

웹 컴포넌트란?

웹 컴포넌트는 HTML, CSS, JavaScript를 사용하여 독립적인 재사용 가능한 구성 요소를 만드는 기술입니다. 웹 컴포넌트는 크게 다음과 같은 세 가지 기술로 구성됩니다.

Custom Elements: 사용자 정의 HTML 태그를 정의할 수 있게 해주는 기능입니다.
Shadow DOM: 구성 요소의 스타일과 스크립트가 외부와 충돌하지 않도록 독립적인 DOM 트리를 제공합니다.
HTML Templates: DOM에 삽입하지 않고도 재사용할 수 있는 HTML 템플릿을 정의할 수 있습니다.

이제 이 세 가지 기술을 사용하여 재사용 가능한 버튼을 만들어보겠습니다.

버튼 컴포넌트 만들기

아래는 기본적인 웹 컴포넌트 버튼의 구현 예제입니다.

1. HTML 구조

먼저, 버튼 컴포넌트를 정의하기 위한 HTML 파일을 만들어보겠습니다. my-button.html이라는 파일을 생성하고 다음 코드를 입력합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component Button</title>
    <script src="my-button.js" defer></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <my-button label="Click Me!" type="primary"></my-button>
    <my-button label="Submit" type="secondary"></my-button>
</body>
</html>

2. JavaScript로 Custom Element 정의

다음으로, my-button.js라는 파일을 만들고 버튼 컴포넌트를 정의합니다.

class MyButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' }); // Shadow DOM 생성
    }

    static get observedAttributes() {
        return ['label', 'type'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'label') {
            this.render();
        }
    }

    connectedCallback() {
        this.render(); // 컴포넌트가 DOM에 추가될 때 렌더링
    }

    render() {
        const buttonType = this.getAttribute('type') || 'default';
        this.shadowRoot.innerHTML = 
            <style>
                button {
                    padding: 10px 20px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    font-size: 16px;
                }
                button.primary {
                    background-color: #007bff;
                    color: white;
                }
                button.secondary {
                    background-color: #6c757d;
                    color: white;
                }
            </style>
            <button class="${buttonType}">${this.getAttribute('label')}</button>
        ;
    }
}

// Custom Element 등록
customElements.define('my-button', MyButton);

3. CSS 스타일링

버튼의 기본 스타일을 위한 CSS를 설정합니다. styles.css 파일을 생성하고 다음 코드를 추가합니다.

button {
    transition: background-color 0.3s;
}

button:hover {
    opacity: 0.8;
}

다양한 버튼 타입 확장

위 예제에서는 기본적인 버튼을 구현했습니다. 추가적으로 다양한 버튼 타입을 지원하는 방법을 살펴보겠습니다. 예를 들어, type 속성을 통해 버튼의 스타일을 다르게 설정할 수 있습니다.

위의 my-button.js에서 render 메서드를 수정하여 버튼 타입에 따라 다른 배경색을 설정할 수 있도록 할 수 있습니다. 추가적인 스타일은 아래와 같이 정의할 수 있습니다.

render() {
    const buttonType = this.getAttribute('type') || 'default';
    this.shadowRoot.innerHTML = 
        <style>
            button {
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 16px;
            }
            button.primary {
                background-color: #007bff;
                color: white;
            }
            button.secondary {
                background-color: #6c757d;
                color: white;
            }
            button.danger {
                background-color: #dc3545;
                color: white;
            }
        </style>
        <button class="${buttonType}">${this.getAttribute('label')}</button>
    ;
}

이제 사용자는 type 속성에 'danger'를 추가하여 위험 경고 버튼을 생성할 수 있습니다.

마무리

이번 튜토리얼에서는 웹 컴포넌트를 이용해 재사용 가능한 버튼 컴포넌트를 만들어 보았습니다. 웹 컴포넌트의 장점을 활용하면 코드의 재사용성과 유지 보수가 용이해집니다. 다양한 버튼 스타일과 타입을 추가하여 더욱 유용한 UI 구성 요소를 만들어보세요. 앞으로도 웹 컴포넌트를 활용한 다양한 UI 요소 제작 방법을 시도해 보시길 바랍니다!