과제 체크포인트

배포 링크

https://minjaeleee.github.io/front_6th_chapter1-2/

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

심화 과제

Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다

과제 셀프회고

기술적 성장

1. JSX의 트랜스파일링 과정 학습

• 막연하게 Babel과 같은 트랜스파일러 덕에 jsx를 적용할 수 있다는 개념만 알고 있었습니다. 이번 학습을 통해서 더 자세하고 정교하게 공부할 수 있었습니다. 또한, 가상 DOM이 jsx -> createVNode -> createElement -> renderElement ( + updateElement) 과정을 통해 실제 DOM에 적용되는 과정을 학습했습니다.

2. esbuild.jsxFactory의 역할 (상세 보기)

• 처음에 이 JSX 파일들을 어디서부터 과정을 시작해야할지 몰라 막막했고, createVNode 함수가 왜 실행이 되어야 하는지 이해하지 못했습니다. esbuildjsxFactory의 역할을 통해서 결국엔 createVNode를 통해 jsx가 js로 변환하는 과정을 학습했습니다.

3. createVNode (상세 보기)

• JSX를 가상 DOM 객체로 변환하는 역할에 대해서 학습했습니다. 특히 객체 내부의 type, props, children의 의미와 리턴 값들을 보면서 노드가 어떻게 구조화하는지 이해할 수 있었습니다. 직접 모든 노드 요소에 대해서 console.log()를 실행해가며 노드와 객체로 리턴된 값들을 비교하며 더 구체적으로 학습할 수 있었습니다.

4. normalizeVNode (상세 보기)

• vNode를 일관된 형태로 정규화하기 위한 함수의 역할을 이해했습니다. 특히나, jsx를 작성하기만 하다보니 다양한 형태의 vNode에 대한 이해가 많이 부족했는데 불필요하게 생성되는 값들을 제거하고, 함수형 vNode들을 실행시키는 등을 직접 경험하면서 전처리의 핵심 역할을 담당한다는 것을 학습할 수 있었습니다.

5. createElement(상세 보기)

• createVNode와 normalizeVNode를 기반으로 실제 DOM 노드를 생성하는 함수에 대해서 이해할 수 있었습니다. 특히나 DOM의 attributes 들을 직접 조작하고 렌더링하는 것이 이해하기 어려웠습니다. 책이나 문서로는 리액트의 등장 배경에 대해서 설명할 때, 선언형의 장점, 직접 DOM을 조작하지 않아서 생기는 장점, 상태와 UI의 분리적 구조에 대해서 외우고 있었는데 실제로 효율적으로 관리하는 경험을 할 수 있었습니다.

6. renderElement(상세 보기)

• React의 ReactDOM.render 기능과 유사한 역할을 하는 renderElement 함수를 직접 작성해보며 가상 DOM을 실제 DOM에 렌더링하는 과정에 대해서 학습할 수 있었습니다.

코드 품질

학습 효과 분석

가상 DOM 렌더링 원리를 직접 구현함으로써 JSX transform, VNode 생성, 실제 DOM 생성 구조 등에 대해서 깊숙이 이해할 수 있었습니다. 개인적으로는 지난주 과제보다 이번주 과제가 더 어려웠습니다. 노드의 type과 props, children의 구조와 케이스를 모두 이해해야하며 attributes, element들을 모두 조작하고 렌더링시켜야 하기 때문에 많이 어려웠습니다. 초기 구현은 ai의 도움을 받았고 develop과 완성도는 테스트 코드를 수정하며 높였습니다… 기능 완성 -> 테스트 코드 수정 -> 다른 기능 수정 -> 기능 완성 -> 테스트 코드 수정의 반복이었습니다..

또한, 이벤트 위임 구조를 작성하며 root 기반 등록 방식 메모리 제어 구조를 배울 수 있었습니다.

과제 피드백

리뷰 받고 싶은 내용

1. updateElement 함수에서 children 요소들을 아래와 같이 index로 구분하는 것이 비효율적일 것 같다는 생각이 드는데, 만약에 요소의 순서만 변경해도 모두 변경되었다고 감지하고 diff 업데이트를 할 것 같습니다. 더 효율적으로 개선할 수 있는 방법이 있을까요??

 // 6. newNode와 oldNode의 모든 자식 태그를 순회하며 1 ~ 5의 내용을 반복한다.
  const newChildren = newNode.children || [];
  const oldChildren = oldNode.children || [];

  // 먼저 공통된 자식들을 처리
  for (let i = 0; i < Math.min(newChildren.length, oldChildren.length); i++) {
    updateElement(parent.childNodes[index], newChildren[i], oldChildren[i], i);
  }

2. 루트 요소에 한 번만 이벤트 리스너를 등록하고, 요소별 핸들러는 addEvent로 Map에 저장하는 이벤트 위임 구조를 사용하고 있는데 예를 들어서 addEvent()를 호출하지 않고 DOM에만 append된 요소라든지, e.stopPropagation()이 중간에 호출되어서 루트까지 도달하지 못 하는 경우가 생길 수 있을 것 같은데 벤트 구조를 확장하면서도 안정적으로 관리할 수 있는 구조적/전략적 개선 방안을 조언받고 싶습니다.