[javascript] 웹 컴포넌트를 사용한 데이터 바인딩 구현 방법

07 Dec 2023

javascript

웹 애플리케이션을 개발할 때, 데이터 바인딩은 매우 중요한 개념입니다. 이는 사용자 인터페이스와 데이터 모델 간의 실시간 동기화를 가능하게 해주는 기능입니다. 최신 웹 개발 표준인 웹 컴포넌트를 사용하면 데이터 바인딩을 보다 쉽고 효율적으로 구현할 수 있습니다.

웹 컴포넌트 소개

웹 컴포넌트는 웹 개발에서 재사용 가능한 컴포넌트를 만들기 위한 표준 기술입니다. 웹 컴포넌트는 Custom Elements, Shadow DOM, Template, HTML Imports 등의 기능을 제공합니다. 이 중 Custom Elements와 Template 기능을 사용하여 데이터 바인딩을 구현할 수 있습니다.

Custom Elements를 사용한 데이터 바인딩

Custom Elements는 사용자 정의 HTML 요소를 만들 수 있는 기능입니다. 이를 사용하여 데이터 바인딩을 구현하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

클래스를 생성하여 Custom Element를 정의합니다.

class MyComponent extends HTMLElement {
  constructor() {
    super();

    // Shadow DOM을 생성합니다.
    this.attachShadow({ mode: 'open' });

    // Template을 가져와서 Shadow DOM에 추가합니다.
    const template = document.getElementById('my-component-template');
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

  connectedCallback() {
    // 데이터 변경에 따른 업데이트를 처리합니다.
    this.update();
  }

  update() {
    // 데이터 모델로부터 값을 가져와서 화면에 업데이트합니다.
    const value = this.getAttribute('value');
    this.shadowRoot.querySelector('.value').textContent = value;
  }
}

// Custom Element를 등록합니다.
customElements.define('my-component', MyComponent);

HTML 파일에서 Custom Element를 사용합니다.

<my-component value="Hello World"></my-component>

<template id="my-component-template">
  <div>
    <span class="value"></span>
  </div>
</template>

위의 코드에서는 my-component라는 Custom Element를 만들고 사용하고 있습니다. 이 컴포넌트는 value 속성을 통해 데이터를 전달받아 화면에 표시합니다. my-component-template이라는 템플릿 요소를 사용하여 화면 구조를 정의하고 있습니다.

Template을 사용한 데이터 바인딩

Template은 재사용 가능한 HTML 스니펫을 정의할 수 있는 기능입니다. 이를 사용하여 데이터 바인딩을 구현하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

Template 요소를 정의합니다.

<template id="my-template">
  <div>
    <span class="value"></span>
  </div>
</template>

JavaScript 코드에서 Template을 가져와서 인스턴스를 생성합니다.

const template = document.getElementById('my-template');
const instance = template.content.cloneNode(true);

// 데이터 모델로부터 값을 가져와서 화면에 업데이트합니다.
const value = 'Hello World';
instance.querySelector('.value').textContent = value;

// 생성된 인스턴스를 DOM에 추가합니다.
document.body.appendChild(instance);

위의 코드에서는 my-template이라는 Template 요소를 정의하고 있습니다. JavaScript 코드에서는 이 템플릿을 가져와서 인스턴스를 생성합니다. 그리고 인스턴스를 DOM에 추가하여 바인딩된 데이터를 화면에 표시합니다.

결론

웹 컴포넌트를 사용하여 데이터 바인딩을 구현하는 방법에 대해 알아보았습니다. Custom Elements를 이용하거나 Template을 사용하여 데이터와 화면을 동기화할 수 있습니다. 이러한 웹 컴포넌트 기능은 코드의 재사용성과 유지 보수성을 높일 수 있습니다.