diff --git a/example01/index.html b/example01/index.html
index daaa611..0b671c4 100644
--- a/example01/index.html
+++ b/example01/index.html
@@ -5,6 +5,7 @@
   <title>Simple Component 1</title>
 </head>
 <body>
+<h1>Example #1</h1>
 <div id="app"></div>
 <script>
   const $app = document.querySelector('#app');
diff --git a/example02/index.html b/example02/index.html
index 4dc7771..8b432e5 100644
--- a/example02/index.html
+++ b/example02/index.html
@@ -5,6 +5,7 @@
   <title>Simple Component 2</title>
 </head>
 <body>
+<h1>Example #2</h1>
 <div id="app"></div>
 <script>
   class Component {
diff --git a/example03/index.html b/example03/index.html
index 7006c69..c53acae 100644
--- a/example03/index.html
+++ b/example03/index.html
@@ -5,6 +5,7 @@
   <title>Simple Component 3</title>
 </head>
 <body>
+<h1>Example #3</h1>
 <div id="app"></div>
 <script src="./src/app.js" type="module"></script>
 </body>
diff --git a/example04/index.html b/example04/index.html
index ec52906..22f8927 100644
--- a/example04/index.html
+++ b/example04/index.html
@@ -5,6 +5,7 @@
   <title>Simple Component 4</title>
 </head>
 <body>
+<h1>Example #4</h1>
 <div id="app"></div>
 <script src="./src/app.js" type="module"></script>
 </body>
diff --git a/example05/index.html b/example05/index.html
index 62d874b..9e31bfb 100644
--- a/example05/index.html
+++ b/example05/index.html
@@ -5,6 +5,7 @@
   <title>Simple Component 5</title>
 </head>
 <body>
+<h1>Example #5</h1>
 <div id="app"></div>
 <script src="./src/app.js" type="module"></script>
 </body>
diff --git a/example06/index.html b/example06/index.html
new file mode 100644
index 0000000..a6d2749
--- /dev/null
+++ b/example06/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Simple Component 6</title>
+</head>
+<body>
+<h1>Example #6</h1>
+<div id="app"></div>
+<script src="./src/app.js" type="module"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/example06/src/app.js b/example06/src/app.js
new file mode 100644
index 0000000..3aa76ed
--- /dev/null
+++ b/example06/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();
diff --git a/example06/src/components/Items.js b/example06/src/components/Items.js
new file mode 100644
index 0000000..34213df
--- /dev/null
+++ b/example06/src/components/Items.js
@@ -0,0 +1,35 @@
+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 });
+    });
+  }
+}
+
diff --git a/example06/src/core/Component.js b/example06/src/core/Component.js
new file mode 100644
index 0000000..c218bde
--- /dev/null
+++ b/example06/src/core/Component.js
@@ -0,0 +1,28 @@
+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);
+    })
+  }
+}
