renderElement 사용

src/lib/createObserver.js

@@ -3,5 +3,6 @@ export const createObserver = () => {
   const subscribe = (fn) => listeners.add(fn);
   const notify = () => listeners.forEach(listener => listener());
 
+  console.log(listeners)
   return { subscribe, notify }
 }

src/lib/renderElement.js

@@ -2,9 +2,10 @@
 import { addEvent, removeEvent, setupEventListeners } from './eventManager';
 import { createElement__v2 } from "./createElement__v2.js";
 
-
 function processVNode(vNode) {
-  if (!vNode) return document.createTextNode("");
+  if (!vNode || typeof vNode === 'boolean') {
+    return document.createTextNode("");
+  };
 
   if (typeof vNode === "string" || typeof vNode === "number") {
     return document.createTextNode(vNode);
@@ -19,7 +20,7 @@ function processVNode(vNode) {
   if (vNode.props) {
     Object.keys(vNode.props).forEach(prop => {
       if (prop.startsWith("on")) {
-        const event = prop.toLowerCase().substring(2); //on뒤에 나오는 string
+        const event = prop.toLowerCase().substring(2);
         element.addEventListener(event, vNode.props[prop]);
       } else if (prop === "className") {
         element.setAttribute("class", vNode.props[prop]);
@@ -37,8 +38,7 @@ function processVNode(vNode) {
   return element;
 }
 
-
-function updateAttributes(domElement, newProps, oldProps = {}) {
+function updateAttributes(domElement, newProps, oldProps) {
 
   Object.keys(newProps).forEach(key => {
     if (key.startsWith('on')) {
@@ -60,7 +60,6 @@ function updateAttributes(domElement, newProps, oldProps = {}) {
   });
 }
 
-
 function updateElement(parent, newNode, oldNode, index = 0) {
   const oldChild = parent.childNodes[index];
 
@@ -69,13 +68,11 @@ function updateElement(parent, newNode, oldNode, index = 0) {
     parent.removeChild(oldChild);
     return;
   }
-
 
   if (newNode && !oldNode) {
     parent.appendChild(processVNode(newNode));
     return;
   }
-
 
   if (typeof newNode === "string" || typeof newNode === "number") {
     if (typeof oldNode === "string" || typeof oldNode === "number") {
@@ -88,34 +85,27 @@ function updateElement(parent, newNode, oldNode, index = 0) {
     return;
   }
 
-
   if (newNode.type !== oldNode.type) {
     parent.replaceChild(processVNode(newNode), oldChild);
     return;
   }
 
-
   if (newNode.type) {
     updateAttributes(oldChild, newNode.props, oldNode.props);
 
     const newLength = newNode.children.length;
     const oldLength = oldNode.children.length;
 
-
     for (let i = newLength; i < oldLength; i++) {
       oldChild.removeChild(oldChild.childNodes[i]);
     }
 
-
     for (let i = 0; i < newLength; i++) {
       updateElement(oldChild, newNode.children[i], oldNode.children[i], i);
     }
   }
 }
 
-
-
-
 export function renderElement(newVNode, container, oldVNode = null) {
 
   if (!oldVNode) {
@@ -125,6 +115,5 @@ export function renderElement(newVNode, container, oldVNode = null) {
     updateElement(container, newVNode, oldVNode);
   }
 
-
   setupEventListeners(container); 
 }

src/main.jsx

@@ -41,7 +41,7 @@ function render() {
   const $root = document.querySelector('#root');
 
   try {
-    const $app = createElement(<App targetPage={router.getTarget()}/>);
+    const $app = renderElement(<App targetPage={router.getTarget()}/>,$root);
     if ($root.hasChildNodes()) {
       $root.firstChild.replaceWith($app)
     } else{