[1팀 김민석] Chapter2-2. 나만의 React 만들기

[kju1018]

과제 체크포인트

배포 링크

https://kju1018.github.io/front_7th_chapter2-2/

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

아하! 모먼트 (A-ha! Moment)

1. "JSX로 표현한 결과를 createVNode createVNode 함수 호출과 동일해야 한다" 라는 테스트를 진행중에 vNode JSX가 createVNode의 리턴 값({type, props,children,})과 같을수가 있을까? 하는 의문점이 있었습니다. 그래서 createVNode를 사용하는곳을 찾아봤고,

/** @jsx createVNode */
import { createVNode } from "../lib";

해당 코드가 역할을 한다는것을 알 수 있게되었습니다.
또한, vite.config.js 파일에 아래 부분도 해당 역할을 한다는것을 알 수 있게되었습니다.

esbuild: {
  jsx: "transform",
  jsxFactory: "createVNode",
},

2. e2e 테스트의 장바구니 시나리오가 계속 실패해서 직접 동작을 확인해 보니, 물건 개수를 늘릴 때 수량이 한 번만 증가하는 것이 아니라 여러 번씩 증가하는 문제가 있었습니다. 원인을 추적하면서 코드를 분석해 보니, 클릭 이벤트가 같은 요소에 중복으로 등록되고 있다는 것을 알게 되었습니다.
   이 중복 등록의 원인은 renderElement가 매 렌더마다 registerEventHandlers를 호출해서, 이미 존재하는 DOM 요소에도 이벤트 핸들러를 계속 다시 붙이고 있었던 부분이었습니다.
   그래서 renderElement에서의 registerEventHandlers 호출을 제거하고, updateElement 내부에서 새 DOM 요소를 새로 만들거나 교체하는 경우에만 registerEventHandlers를 호출하도록 변경하여, 이벤트가 한 번만 등록되도록 수정했습니다.

기술적 성장

코드 품질

이번 과제는 AI에게 구현 요청 후 코드를 이해하는 방식으로 과제를 진행해서 코드품질은 좀 더 봐야알거같습니다.

학습 효과 분석

1. createVNode.js – JSX → Virtual DOM

JSX가 결국 createVNode(type, props, ...children) 같은 함수 호출로 변환된다는 것을 알 수 있게되었습니다. 또한 { type, props, children } 같은 가상 DOM 노드의 최소 단위 모델이 어떤식으로 되어있는지, children을 평탄화하고 null/undefined/boolean을 제거하면서 렌더 가능한 데이터 구조로 정리하는 패턴을 알 수 있었습니다.

2. Diff 알고리즘

newNode / oldNode를 비교해서 타입이 같으면 속성만 업데이트, 타입이 다르면 교체, 자식 배열 길이 비교해서 추가/삭제, 하는 간단하지만 실제 동작하는 diff 알고리즘 동작과정을 보면서 Diff 알고리즘에대해 학습할 수 있었습니다.

과제 피드백

리뷰 받고 싶은 내용

AI가 대부분 작성해주고 그 부분을 이해하고 외우는 방식으로 학습을 진행해서 리뷰 받고 싶은 내용은 없습니다! 좀 더 공부해보겠습니다