2022/10/25 - TIL

diff&render

import applyDiff from "./applyDiff.js";
import eventHolder from "./eventHolder.js";

let $root = null; // root container
let rootComponentInstance = null; // root component's instance
//$root를 통하여 initial render인지 아닌지를 확인한다
const bindEventHandler = ($root) => {
  for (const { type, selector, handler } of eventHolder) {
    (selector === "window" ? window : $root).addEventListener(type, handler);
  }
};
const render = (RootComponent, $container) => {

  if ($container) $root = $container;
  if (RootComponent) rootComponentInstance = new RootComponent();

  const $virtual = $root.cloneNode();
  const domString = rootComponentInstance.render();
  $virtual.innerHTML = domString;
  applyDiff($root, $virtual);
  bindEventHandler($root);
};

export default render;

const updateDOM = (parentNode, realNode, virtualNode) => {

  if (!realNode && virtualNode) {
    parentNode.appendChild(virtualNode);
    return;
  }

  if (realNode && !virtualNode) {
    parentNode.removeChild(realNode);
    return;
  }

  if (
    realNode.nodeType === Node.TEXT_NODE &&
    virtualNode.nodeType === Node.TEXT_NODE
  ) {
    if (realNode.textContent !== virtualNode.textContent)
      realNode.textContent = virtualNode.textContent;
    return;
  }

   if (
    realNode.nodeType === Node.COMMENT_NODE ||
    virtualNode.nodeType === Node.COMMENT_NODE
  )
    return;

	if (realNode.nodeName !== virtualNode.nodeName) {
    parentNode.insertBefore(virtualNode, realNode);
    parentNode.removeChild(realNode);
    return;
  }

  for (const { name, value } of [...virtualNode.attributes]) {
    if (!realNode.hasAttribute(name) || realNode.getAttribute(name) !== value) {
      realNode.setAttribute(name, value);
    }
  }

	for (const { name } of [...realNode.attributes]) {
    if (!virtualNode.hasAttribute(name)) realNode.removeAttribute(name);
  }

  ["checked", "value", "selected"].forEach((key) => {
    if (
      realNode[key] !== undefined &&
      virtualNode[key] !== undefined &&
      realNode[key] !== virtualNode[key]
    ) {
      realNode[key] = virtualNode[key];
    }
  });

  applyDiff(realNode, virtualNode);
};

const applyDiff = (realDOM, virtualDOM) => {
   const [realNodes, virtualNodes] = [
    [...realDOM.childNodes],
    [...virtualDOM.childNodes],
  ];
  const max = Math.max(realNodes.length, virtualNodes.length);

  for (let i = 0; i < max; i++) {
    updateDOM(realDOM, realNodes[i], virtualNodes[i]);
  }
};

export default applyDiff;

리액트의 특징

1. 선언적
2. 컴포넌트 기반
3. 어디에서나 사용 가능

웹팩의 컨셉

1. 번들링
2. 아웃풋
3. 코드 스플리팅

즉시실행함수

모듈. 캡슐화, 필요한것만 공개할 수 있다. 때문에 재사용성을 고려하지 않는다