[6팀 박창수] Chapter 2-2. 나만의 React 만들기

[changsu1993]

과제 체크포인트

배포 링크

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

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

과제 셀프회고

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

Virtual DOM의 핵심 개념을 직접 구현하면서 React가 내부적으로 어떻게 동작하는지 깊이 이해할 수 있었습니다. 특히:

1. JSX → vNode 변환: JSX가 단순히 createVNode 함수 호출로 변환된다는 점
2. 이벤트 위임의 효율성: root에 한 번만 이벤트를 등록하고 버블링을 활용하는 방식의 성능 이점
3. 정규화의 필요성: 함수형 컴포넌트, null/undefined, boolean 등 다양한 타입을 일관된 형태로 변환하는 과정의 중요성
4. Diff 알고리즘의 마법: 변경된 부분만 업데이트하여 DOM 조작을 최소화하는 React의 핵심 최적화 전략

심화 과제를 진행하며 가장 인상 깊었던 점은 DOM 요소의 재사용입니다. 같은 타입의 요소는 제거하고 다시 만드는 것이 아니라, 속성만 업데이트하여 재사용하는 방식이 얼마나 효율적인지 체감할 수
있었습니다.

기술적 성장

• Virtual DOM 구현: createVNode, normalizeVNode, createElement의 역할 분리
• 이벤트 위임 패턴: WeakMap을 활용한 메모리 효율적인 이벤트 핸들러 관리
• 함수형 컴포넌트 처리: children을 props로 전달하는 React의 설계 이해
• Diff 알고리즘: updateElement를 통한 효율적인 DOM 업데이트
• 불리언 속성 최적화: property와 attribute의 차이점 이해 및 적용
• 테스트 주도 개발: 86개의 테스트(기본 48 + 심화 20 + e2e 18)를 모두 통과하며 견고한 코드 작성

코드 품질

만족스러운 구현:

• createVNode의 재귀적 children 평탄화 및 falsy 값 필터링
• eventManager의 중복 이벤트 등록 방지 메커니즘
• normalizeVNode의 함수형 컴포넌트와 일반 요소의 통합 처리
• updateElement의 효율적인 diff 알고리즘 (자식 노드 역순 제거로 인덱스 문제 해결)
• updateAttributes의 불리언 속성을 property로 직접 업데이트하는 최적화

설계 결정:

• WeakMap 사용으로 이전 vNode 저장 → 가비지 컬렉션 친화적
• 자식 노드 제거를 역순으로 처리 → 인덱스 충돌 방지
• 불리언 속성을 property로 설정 → DOM attribute와 분리하여 성능 향상

학습 효과 분석

가장 큰 배움:

• React의 내부 동작 원리를 깊이 이해 (Virtual DOM + Diff 알고리즘)
• Virtual DOM이 왜 필요한지, 어떻게 효율성을 제공하는지 체감
• 이벤트 위임 패턴의 실전 적용
• DOM 조작 최소화의 중요성: Diff 알고리즘을 통해 변경된 부분만 업데이트하는 것이 얼마나 성능에 큰 영향을 주는지 이해

추가 학습 필요 영역:

• Key 기반 Diff 알고리즘 최적화 (리스트 렌더링 최적화)
• Fiber 아키텍처와 비동기 렌더링 (React 18+)
• 메모이제이션 전략 (useMemo, useCallback, React.memo 등)

실무 적용 가능성:

• 이벤트 위임 패턴은 대규모 애플리케이션에서 바로 활용 가능
• Virtual DOM 개념 이해를 통한 React 성능 최적화 인사이트
• 컴포넌트 설계 시 렌더링 최적화 고려 가능 (불필요한 리렌더링 방지)
• Diff 알고리즘 이해를 통한 key prop의 중요성 체감

과제 피드백

좋았던 부분:

• 단계별로 구현하며 점진적으로 복잡도를 높이는 구조
• 테스트 코드가 잘 작성되어 구현 방향을 명확히 제시
• e2e 테스트를 통해 실제 동작 검증 가능
• 기본과제와 심화과제의 명확한 분리로 학습 곡선이 적절함

리뷰 받고 싶은 내용