시작하기 전 이해하기

과제 요구사항

• 가상돔 만들기

업데이트 되는 부분 반영하기(diff)

가상돔과 실제돔 만들고 렌더링 하는 순서

1. createVNode

   • 예를 들어 <div>지원</div>을 다음과 같은 객체로 변환합니다
   • React의 React.createElement()와 동일한 역할입니다
   • JSX를 객체 형태의 가상 DOM으로 변환합니다

   { type: 'div', props: { id: 'app' }, children: [...] }
   

2. normalizeVNode

   • 가상 DOM 노드를 정규화하는 함수입니다
   • 주요 역할
     • null, undefined, boolean 값을 빈 문자열로 변환
     • 컴포넌트 함수를 실제 HTML 요소로 변환
     • 자식 요소들도 재귀적으로 정규화

3. createElement

   • 정규화된 가상 DOM을 실제 DOM 요소로 변환하는 함수입니다
   • document.createElement()를 사용해 실제 DOM 노드 생성
   • React의 ReactDOM.render()의 일부 기능과 비슷

   // 가상 DOM을 실제 DOM 객체로 변환
   document.createElement('div') // 실제 DOM 요소 생성
   // 하지만 이 시점에서는 메모리에만 존재!
   

4. renderElement

   • 실제 DOM 요소를 화면에 렌더링하는 함수입니다
     • createElement로 생성된 DOM 요소를 실제 페이지에 추가
     • 부모 요소의 appendChild() 또는 insertBefore()를 사용
     • 이전 요소가 있다면 교체하거나 업데이트

5. 중요한 점

   • DOM 요소를 만드는 것(createElement)과 화면에 표시하는 것(renderElement)은 별개의 작업이에요
   • document.createElement()로 만든 요소는 메모리에만 존재하고
   • 실제로 화면에 보이려면 appendChild() 나 insertBefore() 같은 메서드로 DOM 트리에 추가해야 해요

6. 전체 실행 순서

   JSX → createVNode → normalizeVNode → createElement → renderElement
   ↓        ↓              ↓               ↓               ↓
   <div>   {type,        정규화된        실제 DOM        화면에
   지원    props,        가상 DOM        요소 생성       표시
   </div>  children}      객체           (메모리)        (브라우저)
   

가상돔 개념

흠… 실제 DOM의 가벼운 복사본 같은 느낌이다.

이 개념을 참고하여 ~~

아래 코드는 학습 자료에서 가져온 것이다

<div id="app">
  <ul>
    <li>
      <input type="checkbox" class="toggle" />
      todo list item 1
      <button class="remove">삭제</button>
    </li>
    <li class="completed">
      <input type="checkbox" class="toggle" checked />
      todo list item 2
      <button class="remove">삭제</button>
    </li>
  </ul>
  <form>
    <input type="text" />
    <button type="submit">추가</button>
  </form>
</div>

• 이런 HTML을 가상돔으로 표현하면 아래와 같다.

function virtualDom(type, props, ...children) {
  return { type, props, children: children.flat() }
}

const result = (
	virtualDom('div', { id: 'app' },
	  virtualDom('ul', null,
	    virtualDom('li', null,
	      virtualDom('input', { type: 'checkbox', className: 'toggle' }),
	      'todo list item 1',
	      virtualDom('button', { className: 'remove' }, '삭제')
	    ),
	    virtualDom('li', { className: 'completed' },
	      virtualDom('input', { type: 'checkbox', className: 'toggle', checked: true }),
	      'todo list item 2',
	      virtualDom('button', { className: 'remove' }, '삭제')
	    ),
	  ),
	  virtualDom('form',
	    virtualDom('input', { type: 'text' }),
	    virtualDom('button', { type: 'submit' }, '추가'),
	  )
	)
);