feat: example03 작성 완료

2020-10-24 18:24:26 +09:00
parent e0c576cddd
commit f11dca9121
4 changed files with 64 additions and 0 deletions
--- a/example03/index.html
+++ b/example03/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Simple Component 2</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="./src/app.js" type="module"></script>
+</body>
+</html>
--- a/example03/src/app.js
+++ b/example03/src/app.js
@@ -0,0 +1,10 @@
+import Items from "./components/Items.js";
+
+class App {
+  constructor() {
+    const $app = document.querySelector('#app');
+    new Items($app);
+  }
+}
+
+new App();
--- a/example03/src/components/Items.js
+++ b/example03/src/components/Items.js
@@ -0,0 +1,23 @@
+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}` ] });
+    });
+  }
+}
--- a/example03/src/core/Component.js
+++ b/example03/src/core/Component.js
@@ -0,0 +1,20 @@
+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();
+  }
+}