바닐라 JS로 웹 컴포넌트 만들기

JavaScript

바닐라 JS로 웹 컴포넌트 만들기

kohi ☕ 2022. 12. 11. 15:17

👽 컴포넌트란?

프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 레고 블록처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 웹 컴포넌트를 이용하여 코드를 작성하면 Vue나 React와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다.

👽 바닐라 JS로 웹 컴포넌트 구현

index.html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Component EX</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./src/app.js" type="module"></script>
    </body>
</html>

src > app.js

import Items from "./components/Items.js";

class App {
    constructor() {
        const $app = document.querySelector("#app");
        new Items($app);
    }
}

new App();

src > component > Item.js

import Component from "../core/Component.js";

export default class Items extends Component {
    setup() {
        this.$state = { items: ["item1", "item2"] };
    }
    template() {
        const { items } = this.$state;
        return `
      <ul>
        ${items.map((item) => `<li>${item}</li>`).join("")}
      </ul>
      <button>추가</button>
    `;
    }

    setEvent() {
        this.$target.querySelector("button").addEventListener("click", () => {
            const { items } = this.$state;
            this.setState({ items: [...items, `item${items.length + 1}`] });
        });
    }
}

src > core > Components.js

export default class Component {
    $target;
    $state;
    constructor($target) {
        this.$target = $target;
        this.setup();
        this.render();
    }
    setup() {}
    template() {
        return "";
    }
    render() {
        this.$target.innerHTML = this.template();
        this.setEvent();
    }
    setEvent() {}
    setState(newState) {
        this.$state = { ...this.$state, ...newState };
        this.render();
    }
}

앞서 작성한 코드를 사용하면 render 시 이벤트가 새로 등록된다. 각각의 아이템에 대해 삭제 기능을 추가한다고 하면 다음과 같다.

src > component > Item.js

import Component from "../core/Component.js";

export default class Items extends Component {
    setup() {
        this.$state = { items: ["item1", "item2"] };
    }
    template() {
        const { items } = this.$state;
        return `
      <ul>
        ${items
            .map(
                (item, key) => `
          <li>
            ${item}
            <button class="deleteBtn" data-index="${key}">삭제</button>
          </li>
        `
            )
            .join("")}
      </ul>
      <button class="addBtn">추가</button>
    `;
    }

    setEvent() {
        this.$target.querySelector(".addBtn").addEventListener("click", () => {
            const { items } = this.$state;
            this.setState({ items: [...items, `item${items.length + 1}`] });
        });

        this.$target.querySelectorAll(".deleteBtn").forEach((deleteBtn) =>
            deleteBtn.addEventListener("click", ({ target }) => {
                const items = [...this.$state.items];
                items.splice(target.dataset.index, 1);
                this.setState({ items });
            })
        );
    }
}

다음과 같이 이벤트 버블링을 사용한다면 훨씬 직관적으로 처리할 수 있다.

src > core > Components.js

import Component from "../core/Component.js";

export default class Items extends Component {
    setup() {
        this.$state = { items: ["item1", "item2"] };
    }
    template() {
        const { items } = this.$state;
        return `
      <ul>
        ${items
            .map(
                (item, key) => `
          <li>
            ${item}
            <button class="deleteBtn" data-index="${key}">삭제</button>
          </li>
        `
            )
            .join("")}
      </ul>
      <button class="addBtn">추가</button>
    `;
    }

    setEvent() {
        // 모든 이벤트를 this.$target에 등록하여 사용하면 된다.
        this.$target.addEventListener("click", ({ target }) => {
            const items = [...this.$state.items];

            if (target.classList.contains("addBtn")) {
                this.setState({ items: [...items, `item${items.length + 1}`] });
            }

            if (target.classList.contains("deleteBtn")) {
                items.splice(target.dataset.index, 1);
                this.setState({ items });
            }
        });
    }
}

src > component > Item.js
기존의 setEvent는 render를 할 때마다 실행되므로 라이프 사이클을 변경해야 한다. event를 각각의 하위 요소가 아니라 component의 target 자체에 등록하는 것이다. component가 생성되는 시점에만 이벤트 등록을 해놓으면 추가로 등록할 필요가 없어진다.

export default class Component {
    $target;
    $state;
    constructor($target) {
        this.$target = $target;
        this.setup();
        this.setEvent();
        this.render();
    }
    setup() {}
    template() {
        return "";
    }
    render() {
        this.$target.innerHTML = this.template();
    }
    setEvent() {}
    setState(newState) {
        this.$state = { ...this.$state, ...newState };
        this.render();
    }
}

💡 이벤트 버블링

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다.

src > core > Components.js
이벤트 버블링을 통한 등록 과정을 메서드로 만들어서 사용하면 코드가 더 깔끔해진다.

export default class Component {
    $target;
    $state;
    constructor($target) {
        this.$target = $target;
        this.setup();
        this.setEvent();
        this.render();
    }
    setup() {}
    template() {
        return "";
    }
    render() {
        this.$target.innerHTML = this.template();
    }
    setEvent() {}
    setState(newState) {
        this.$state = { ...this.$state, ...newState };
        this.render();
    }
    addEvent(eventType, selector, callback) {
        const children = [...this.$target.querySelectorAll(selector)];
        const isTarget = (target) => children.includes(target) || target.closest(selector);
        this.$target.addEventListener(eventType, (event) => {
            if (!isTarget(event.target)) return false;
            callback(event);
        });
    }
}

이렇게 작성한 메서드는 다음과 같이 사용한다.
src > component > Item.js

import Component from "../core/Component.js";

export default class Items extends Component {
    setup() {
        this.$state = { items: ["item1", "item2"] };
    }
    template() {
        const { items } = this.$state;
        return `
      <ul>
        ${items
            .map(
                (item, key) => `
          <li>
            ${item}
            <button class="deleteBtn" data-index="${key}">삭제</button>
          </li>
        `
            )
            .join("")}
      </ul>
      <button class="addBtn">추가</button>
    `;
    }

    setEvent() {
        this.addEvent("click", ".addBtn", ({ target }) => {
            const { items } = this.$state;
            this.setState({ items: [...items, `item${items.length + 1}`] });
        });
        this.addEvent("click", ".deleteBtn", ({ target }) => {
            const items = [...this.$state.items];
            items.splice(target.dataset.index, 1);
            this.setState({ items });
        });
    }
}

👽 컴포넌트 분할

index.html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>Simple Component 8</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="src/main.js" type="module"></script>
    </body>
</html>

src > main.js (기존의 app.js 파일)

import App from "./App.js";

new App(document.querySelector("#app"));

src > App.js

import Component from "./core/Component.js";
import Items from "./components/Items.js";
import ItemAppender from "./components/ItemAppender.js";
import ItemFilter from "./components/ItemFilter.js";

export default class App extends Component {
    setup() {
        this.$state = {
            isFilter: 0,
            items: [
                {
                    seq: 1,
                    contents: "item1",
                    active: false,
                },
                {
                    seq: 2,
                    contents: "item2",
                    active: true,
                },
            ],
        };
    }

    template() {
        return `
      <header data-component="item-appender"></header>
      <main data-component="items"></main>
      <footer data-component="item-filter"></footer>
    `;
    }

    mounted() {
        const { filteredItems, addItem, deleteItem, toggleItem, filterItem } = this;
        const $itemAppender = this.$target.querySelector('[data-component="item-appender"]');
        const $items = this.$target.querySelector('[data-component="items"]');
        const $itemFilter = this.$target.querySelector('[data-component="item-filter"]');

        new ItemAppender($itemAppender, {
            addItem: addItem.bind(this),
        });
        new Items($items, {
            filteredItems,
            deleteItem: deleteItem.bind(this),
            toggleItem: toggleItem.bind(this),
        });
        new ItemFilter($itemFilter, {
            filterItem: filterItem.bind(this),
        });
    }

    get filteredItems() {
        const { isFilter, items } = this.$state;
        return items.filter(({ active }) => (isFilter === 1 && active) || (isFilter === 2 && !active) || isFilter === 0);
    }

    addItem(contents) {
        const { items } = this.$state;
        const seq = Math.max(0, ...items.map((v) => v.seq)) + 1;
        const active = false;
        this.setState({
            items: [...items, { seq, contents, active }],
        });
    }

    deleteItem(seq) {
        const items = [...this.$state.items];
        items.splice(
            items.findIndex((v) => v.seq === seq),
            1
        );
        this.setState({ items });
    }

    toggleItem(seq) {
        const items = [...this.$state.items];
        const index = items.findIndex((v) => v.seq === seq);
        items[index].active = !items[index].active;
        this.setState({ items });
    }

    filterItem(isFilter) {
        this.setState({ isFilter });
    }
}

src > components > ItemAppener.js

import Component from "../core/Component.js";

export default class ItemAppender extends Component {
    template() {
        return `<input type="text" class="appender" placeholder="아이템 내용 입력" />`;
    }

    setEvent() {
        const { addItem } = this.$props;
        this.addEvent("keyup", ".appender", ({ key, target }) => {
            if (key !== "Enter") return;
            addItem(target.value);
        });
    }
}

src > components > ItemFilter.js

import Component from "../core/Component.js";

export default class ItemFilter extends Component {
    template() {
        return `
      <button class="filterBtn" data-is-filter="0">전체 보기</button>
      <button class="filterBtn" data-is-filter="1">활성 보기</button>
      <button class="filterBtn" data-is-filter="2">비활성 보기</button>
    `;
    }

    setEvent() {
        const { filterItem } = this.$props;
        this.addEvent("click", ".filterBtn", ({ target }) => {
            filterItem(Number(target.dataset.isFilter));
        });
    }
}

src > components > Items.js

import Component from "../core/Component.js";

export default class Items extends Component {
    template() {
        const { filteredItems } = this.$props;
        return `
      <ul>
        ${filteredItems
            .map(
                ({ contents, active, seq }) => `
          <li data-seq="${seq}">
            ${contents}
            <button class="toggleBtn" style="color: ${active ? "#09F" : "#F09"}">
              ${active ? "활성" : "비활성"}
            </button>
            <button class="deleteBtn">삭제</button>
          </li>
        `
            )
            .join("")}
      </ul>
    `;
    }

    setEvent() {
        const { deleteItem, toggleItem } = this.$props;

        this.addEvent("click", ".deleteBtn", ({ target }) => {
            deleteItem(Number(target.closest("[data-seq]").dataset.seq));
        });

        this.addEvent("click", ".toggleBtn", ({ target }) => {
            toggleItem(Number(target.closest("[data-seq]").dataset.seq));
        });
    }
}

src > core > Component.js

export default class Component {
    $target;
    $props;
    $state;
    constructor($target, $props) {
        this.$target = $target;
        this.$props = $props;
        this.setup();
        this.setEvent();
        this.render();
    }
    setup() {}
    mounted() {}
    template() {
        return "";
    }
    render() {
        this.$target.innerHTML = this.template();
        this.mounted();
    }
    setEvent() {}
    setState(newState) {
        this.$state = { ...this.$state, ...newState };
        this.render();
    }
    addEvent(eventType, selector, callback) {
        this.$target.addEventListener(eventType, (event) => {
            if (!event.target.closest(selector)) return false;
            callback(event);
        });
    }
}

👽 Reference

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_3-component-core-%E1%84%87%E1%85%A7%E1%86%AB%E1%84%80%E1%85%A7%E1%86%BC

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일

Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝open in new window에서 진행하는 블랙커피 스터디open in new window에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트

junilhwang.github.io

https://github.com/JunilHwang/simple-component

GitHub - JunilHwang/simple-component: 간단한 컴포넌트를 만드는 예제

간단한 컴포넌트를 만드는 예제. Contribute to JunilHwang/simple-component development by creating an account on GitHub.

github.com

https://developer.mozilla.org/ko/docs/Web/Web_Components

웹 컴포넌트 | MDN

웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.

developer.mozilla.org

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81---event-bubbling

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.

joshua1988.github.io

https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/

컴포넌트(Component)란? - 하나몬

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성

hanamon.kr