05. UI 구현 - f-lab-edu/toss-tech-router GitHub Wiki
구현방법
toss.tech UI를 웹 컴포넌트를 활용하여 구현했습니다.
웹컴포넌트
웹 컴포넌트는 재사용을 목적으로 캡슐화된 커스텀 HTML 요소를 만들 수 있습니다.
customElement
customElement를 사용하면 새로운 HTML 요소를 만들거나 기존 HTML 요소를 확장할 수 있습니다.
Shadow DOM
Shadow DOM은 컴포넌트 스코프를 DOM에서 분리하고 CSS를 모듈화할 수 있습니다.
활용
- 웹컴포넌트를 만들면 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;
- 웹컴포넌트를 활용하면 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>
`;
}