05. UI 구현 - f-lab-edu/toss-tech-router GitHub Wiki

구현방법

toss.tech UI를 웹 컴포넌트를 활용하여 구현했습니다.

웹컴포넌트

웹 컴포넌트는 재사용을 목적으로 캡슐화된 커스텀 HTML 요소를 만들 수 있습니다.

customElement

customElement를 사용하면 새로운 HTML 요소를 만들거나 기존 HTML 요소를 확장할 수 있습니다.

Shadow DOM

Shadow DOM은 컴포넌트 스코프를 DOM에서 분리하고 CSS를 모듈화할 수 있습니다.

활용

  1. 웹컴포넌트를 만들면 HTML에서 <sample-page desc="안녕하세요"></sample-page> 로 활용할 수 있습니다.
// HTMLElement를 상속 받아야 웹 컴포넌트로써 활용가능합니다.
class SamplePage extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  // DOM에 추가될 때 자동으로 호출되는 함수입니다.
  connectedCallback() {
    this.render();
  }

  // 속성 값이 변경될 때 자동으로 호출되는 함수입니다.
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(name, oldValue, newValue);
  }

  // 변경 된 속성 값을 추적하기 위해서는 observedAttributes에 명시해야 합니다.
  observedAttributes() {
   return ['desc'];
  }

  get styles() {
    return `
      <style>
       ...css 스타일을 작성해요.
      </style>
    `;
  }

  createSampleHTML(props) {
    return `
      <div class='sample-container'>
       ${props.desc}
      </div>
    `;
  }

  render() {
    // arttibue로 전달받은 속성 값을 활용할 수 있습니다.
    const props = {
      desc: this.getAttribute('desc'),
    };
    const sampleHTML = this.createSampleHTML(props);
    this.shadowRoot.innerHTML = `
      ${this.styles}
      ${sampleHTML}
    `;
  }
}

customElements.define('sample-page', SamplePage);

export default SamplePage;

  1. 웹컴포넌트를 활용하면 JSX처럼 컴포넌트화하여 명시적으로 작성할 수 있습니다.
render(response) {
    this.shadowRoot.innerHTML = `
      ${this.styles}
      <section class="article-page__container">
        <article-header
          thumbnail="${response.thumbnail}"
          title="${response.title}"
          image="${response.writer.image}"
          name="${response.writer.name}"
          job="${response.writer.job}"
          date="${response.writer.date}"
        ></article-header>
        <article-body description="${response.description}"></article-body>
      </section>
    `;
}
⚠️ **GitHub.com Fallback** ⚠️