중복 코드 변경

Author: 김수현

src/__tests__/advanced.test.jsx

@@ -30,7 +30,6 @@ describe("Chapter1-2 > 심화과제 > Virtual DOM과 이벤트 관리", () => {
         </div>
       );
       renderElement(initialVNode, container);
-      console.log(container.innerHTML); // 디버깅용
 
       const originalH1 = container.querySelector("h1");
       const originalP = container.querySelector("p");
@@ -42,7 +41,6 @@ describe("Chapter1-2 > 심화과제 > Virtual DOM과 이벤트 관리", () => {
         </div>
       );
       renderElement(updatedVNode, container);
-      console.log(container.innerHTML); // 디버깅용
 
       expect(container.innerHTML).toBe("<div><h1>Updated Title</h1><p>Paragraph 1</p></div>");
       expect(container.querySelector("h1")).toBe(originalH1); // 같은 요소 참조 확인
@@ -397,7 +395,6 @@ describe("Chapter1-2 > 심화과제 > Virtual DOM과 이벤트 관리", () => {
         );
 
         renderElement(initialVNode, container);
-        console.log(container.innerHTML); // 디버깅용
         expect(container.firstChild.children.length).toBe(5);
 
         // 새 상태: 2개의 자식

src/__tests__/basic.test.jsx

@@ -196,8 +196,6 @@ describe("Chapter1-2 > 기본과제 > 가상돔 만들기 > ", () => {
           },
         },
       ])("$name", ({ vNode, expected }) => {
-        console.log("vNode:::::", vNode);
-        console.log("expected:::::", expected);
         expect(vNode).toEqual(expected);
       });
     });

src/lib/createElement.js

@@ -1,5 +1,5 @@
 //createElement함수는 가상돔을 돔으로 변환해주는 것
-import { addEvent } from "./eventManager";
+import { updateAttributes } from "./updateElement";
 
 export function createElement(vNode) {
   if (vNode === null || vNode === undefined || typeof vNode === "boolean") {
@@ -18,36 +18,13 @@ export function createElement(vNode) {
     return fragment;
   }
 
-  //   if (typeof vNode.type === "function") {
-  //     const { props = {}, children = [] } = vNode;
-  //     const nextVNode = vNode.type({ ...props, children });
-  //     return createElement(nextVNode);
-  //   }
   if (typeof vNode.type === "function" || (typeof vNode.type === "object" && typeof vNode.type.type === "function")) {
     throw new Error("컴포넌트는 createElement로 직접 처리할 수 없습니다. 먼저 normalizeVNode로 정규화하세요.");
   }
 
   const $el = document.createElement(vNode.type);
 
-  Object.entries(vNode.props || {}).forEach(([key, value]) => {
-    if (key.startsWith("on") && typeof value === "function") {
-      const eventName = key.slice(2).toLowerCase();
-      addEvent($el, eventName, value);
-    } else if (key === "className") {
-      $el.setAttribute("class", value);
-    } else if (key === "style" && typeof value === "object") {
-      Object.entries(value).forEach(([styleName, styleValue]) => {
-        $el.style[styleName] = styleValue;
-      });
-    } else if (key.startsWith("data-")) {
-      $el.setAttribute(key, value);
-    } else if (typeof value === "boolean") {
-      if (value) $el.setAttribute(key, "");
-      // false면 아무것도 안 함
-    } else {
-      $el.setAttribute(key, value);
-    }
-  });
+  updateAttributes($el, vNode.props || {}, {});
 
   const children = Array.isArray(vNode.children) ? vNode.children : [];
   children.forEach((child) => {
@@ -56,5 +33,3 @@ export function createElement(vNode) {
 
   return $el;
 }
-
-//function updateAttributes($el, props) {}

src/lib/renderElement.js

@@ -18,7 +18,6 @@ export function renderElement(vNode, container) {
   const oldVNode = vnodeMap.get(container);
 
   if (!oldVNode) {
-    console.log("초기 렌더링");
     const dom = createElement(nextVNode);
     container.appendChild(dom);
   } else {

src/lib/updateElement.js

@@ -3,7 +3,7 @@ import { addEvent, removeEvent } from "./eventManager";
 import { createElement } from "./createElement.js";
 
 //DOM 요소의 속성/이벤트를 비교해서 변경, 추가, 삭제
-function updateAttributes(target, originNewProps, originOldProps = null) {
+export function updateAttributes(target, originNewProps, originOldProps = null) {
   Object.keys(originOldProps).forEach((key) => {
     if (!(key in originNewProps)) {
       if (key.startsWith("on")) {
@@ -13,7 +13,7 @@ function updateAttributes(target, originNewProps, originOldProps = null) {
         //addEvent와 removeEvent가
         //실제 DOM의 addEventListener/removeEventListener까지 관리해야
         //이벤트가 완전히 제거됩니다.
-        target.removeEventListener(key.slice(2).toLowerCase(), originOldProps[key]);
+        //target.removeEventListener(key.slice(2).toLowerCase(), originOldProps[key]);
       } else if (key === "className") {
         target.removeAttribute("class");
       } else if (key === "checked" || key === "disabled" || key === "selected" || key === "readOnly") {
@@ -32,7 +32,7 @@ function updateAttributes(target, originNewProps, originOldProps = null) {
       if (key.startsWith("on") && typeof originNewProps[key] === "function") {
         if (originOldProps[key]) {
           removeEvent(target, key.slice(2).toLowerCase(), originOldProps[key]);
-          target.removeEventListener(key.slice(2).toLowerCase(), originOldProps[key]);
+          //target.removeEventListener(key.slice(2).toLowerCase(), originOldProps[key]);
           //addEvent(target, key.slice(2).toLowerCase(), originNewProps[key]);
         }
         addEvent(target, key.slice(2).toLowerCase(), originNewProps[key]);