웹 컴포넌트는 웹 애플리케이션 개발에 있어서 모듈화와 재사용성을 높여주는 도구입니다. 이러한 장점을 최대한 활용하기 위해서는 일반적인 디자인 패턴을 적용하는 것이 좋습니다. 이번 글에서는 웹 컴포넌트의 일반적인 디자인 패턴에 대해 알아보겠습니다.

1. 캡슐화

캡슐화는 웹 컴포넌트의 중요한 디자인 패턴 중 하나입니다. 컴포넌트는 자체적으로 독립적인 기능을 수행하고 외부에 노출되는 API를 통해 상호작용합니다. 이를 통해 다른 개발자들은 컴포넌트의 내부 동작을 신경 쓰지 않고 사용할 수 있습니다. 컴포넌트의 내부 상태나 메서드는 외부에서 직접 접근할 수 없도록 private으로 유지하는 것이 좋습니다.

class MyComponent extends HTMLElement {
  #internalState;

  constructor() {
    super();
    this.#internalState = 0;
  }
  
  // 외부에서 호출 가능한 public 메서드
  increment() {
    this.#internalState++;
    this.update();
  }
  
  // 컴포넌트의 렌더링 로직
  update() {
    // ...
  }
}

2. 이벤트 기반 통신

웹 컴포넌트 간의 통신은 이벤트 기반으로 이루어집니다. 이벤트를 사용하여 컴포넌트 간의 데이터를 전달하거나 컴포넌트의 상태 변화를 알리는 것이 가능합니다. 이렇게 함으로써 각 컴포넌트는 독립적으로 자신의 역할을 수행할 수 있고, 상위 컴포넌트는 하위 컴포넌트의 이벤트를 관리하여 전체 애플리케이션의 상태를 조율할 수 있습니다.

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.addEventListener('customEvent', this.handleCustomEvent);
  }
  
  disconnectedCallback() {
    this.removeEventListener('customEvent', this.handleCustomEvent);
  }
  
  handleCustomEvent(event) {
    // 이벤트 핸들링 로직
  }
  
  run() {
    const event = new CustomEvent('customEvent', {
      detail: {
        message: 'Hello!'
      }
    });
    this.dispatchEvent(event);
  }
}

3. 슬롯 활용

슬롯은 웹 컴포넌트 내에서 외부에서 전달된 컨텐츠를 동적으로 포함할 수 있는 기능입니다. 이를 통해 컴포넌트의 일부 영역을 외부 컨텐츠로 채워넣거나, 컴포넌트 간의 중첩과 재사용을 용이하게 할 수 있습니다.

<!-- 부모 컴포넌트의 마크업 -->
<my-component>
  <h1 slot="title">Title</h1>
  <p slot="content">Content</p>
</my-component>

<!-- 자식 컴포넌트의 마크업 -->
<template>
  <div>
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>

이 외에도 다양한 디자인 패턴이 존재하며, 개발자는 프로젝트의 요구사항에 맞게 적절한 패턴을 선택하여 사용할 수 있습니다. 웹 컴포넌트를 이용한 개발에 익숙해지면서 여러 가지 패턴을 실험하고 개선해 나갈 수 있습니다.

참고 자료:

• Web Components
• Web Components Best Practices