feat: example01 작성 완료

2020-10-24 18:10:34 +09:00
parent 97c965835f
commit b324b8c57f
1 changed files with 37 additions and 0 deletions
--- a/example01.html
+++ b/example01.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Simple Component 1</title>
+</head>
+<body>
+<div id="app"></div>
+<script>
+  const $app = document.querySelector('#app');
+
+  let state = {
+    items: ['item1', 'item2', 'item3', 'item4']
+  }
+
+  const render = () => {
+    const { items } = state;
+    $app.innerHTML = `
+      <ul>
+        ${items.map(item => `<li>${item}</li>`).join('')}
+      </ul>
+      <button id="append">추가</button>
+    `;
+    document.querySelector('#append').addEventListener('click', () => {
+      setState({ items: [ ...items, `item${items.length + 1}` ] })
+    })
+  }
+
+  const setState = (newState) => {
+    state = { ...state, ...newState };
+    render();
+  }
+
+  render();
+</script>
+</body>
+</html>