refactor: 이벤트 바인딩 함수 분리

Author: bgyoons

src/components/TodoList.ts

@@ -12,34 +12,9 @@ export default class TodoList {
     private readonly updateCount: (state: TodoLi) => void
   ) {
     $target.appendChild(this.$todoList);
-
     this.state = initialState;
     this.render();
-
-    this.$todoList.addEventListener("click", (e) => {
-      const target = e.target as HTMLLIElement;
-      const $li = target.closest("li");
-
-      if (!$li) return;
-
-      const newState = [...this.state];
-      if (typeof $li.dataset.index !== "string") return;
-      const index = +$li.dataset.index;
-
-      if (target.className === "deleteBtn") {
-        newState.splice(index, 1);
-        this.setState(newState);
-      } else if (target.className.includes("todoList")) {
-        const isCompleted = target.className.includes("completed");
-        if (isCompleted) target.classList.remove("completed");
-        else target.classList.add("completed");
-        newState[index] = {
-          ...newState[index],
-          isCompleted: !isCompleted,
-        };
-        this.setState(newState);
-      }
-    });
+    this.setEvent();
   }
 
   setState(nextState: TodoLi) {
@@ -67,4 +42,31 @@ export default class TodoList {
       </ul>
     `;
   };
+
+  private setEvent() {
+    this.$todoList.addEventListener("click", (e) => {
+      const target = e.target as HTMLLIElement;
+      const $li = target.closest("li");
+
+      if (!$li) return;
+
+      const newState = [...this.state];
+      if (typeof $li.dataset.index !== "string") return;
+      const index = +$li.dataset.index;
+
+      if (target.className === "deleteBtn") {
+        newState.splice(index, 1);
+        this.setState(newState);
+      } else if (target.className.includes("todoList")) {
+        const isCompleted = target.className.includes("completed");
+        if (isCompleted) target.classList.remove("completed");
+        else target.classList.add("completed");
+        newState[index] = {
+          ...newState[index],
+          isCompleted: !isCompleted,
+        };
+        this.setState(newState);
+      }
+    });
+  }
 }