[7팀 이현지] Chapter 2-2. 나만의 React 만들기

[Leehyunji0715]

과제 체크포인트

배포 링크

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

기본과제

Phase 1: VNode와 기초 유틸리티

• core/elements.ts: createElement, normalizeNode, createChildPath
• utils/validators.ts: isEmptyValue
• utils/equals.ts: shallowEquals, deepEquals

Phase 2: 컨텍스트와 루트 초기화

• core/types.ts: VNode/Instance/Context 타입 선언
• core/context.ts: 루트/훅 컨텍스트와 경로 스택 관리
• core/setup.ts: 컨테이너 초기화, 컨텍스트 리셋, 루트 렌더 트리거

Phase 3: DOM 인터페이스 구축

• core/dom.ts: 속성/스타일/이벤트 적용 규칙, DOM 노드 탐색/삽입/제거

Phase 4: 렌더 스케줄링

• utils/enqueue.ts: enqueue, withEnqueue로 마이크로태스크 큐 구성
• core/render.ts: render, enqueueRender로 루트 렌더 사이클 구현

Phase 5: Reconciliation

• core/reconciler.ts: 마운트/업데이트/언마운트, 자식 비교, key/anchor 처리
• core/dom.ts: Reconciliation에서 사용할 DOM 재배치 보조 함수 확인

Phase 6: 기본 Hook 시스템

• core/hooks.ts: 훅 상태 저장, useState, useEffect, cleanup/queue 관리
• core/context.ts: 훅 커서 증가, 방문 경로 기록, 미사용 훅 정리

기본 과제 완료 기준: basic.equals.test.tsx, basic.mini-react.test.tsx 전부 통과

심화과제

Phase 7: 확장 Hook & HOC

• hooks/useRef.ts: ref 객체 유지
• hooks/useMemo.ts, hooks/useCallback.ts: shallow 비교 기반 메모이제이션
• hooks/useDeepMemo.ts, hooks/useAutoCallback.ts: deep 비교/자동 콜백 헬퍼
• hocs/memo.ts, hocs/deepMemo.ts: props 비교 기반 컴포넌트 메모이제이션

과제 셀프회고

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

• React에서 훅이 함수 내에서 어떻게 상태를 유지하는 지 알 수 있었습니다! (클로저, path-cursor 의 조합)
• React Fragment와 Component가 어떻게 실제 dom으로 변환되기까지 과정이 이뤄지는지! (reconcile에서 Fragment일때, Component일때 모두 케이스별로 다뤄서 처리)

이라 하고 AI 와의 Q&A 입니다

1. ‘removeInstance’ 함수에서 getDomNodes()로 하위 Children 들을 왜 재귀로 가져오는가?
   어차피 코드에서 ‘node === parentNode’ 조건을 걸어서 삭제하기 때문에 직계 자손만 삭제하면 되는데!

export const removeInstance = (parentDom: HTMLElement, instance: Instance | null): void => {
  if (!instance) {
    return;
  }

  // DOM 노드들 제거
  const domNodes = getDomNodes(instance); // 재귀함수로, 하위 모든 children을 가져옴.
  for (const domNode of domNodes) {
    if (domNode && domNode.parentNode === parentDom) { // 이 부분! 직계 자손만 삭제한다는거 아닌가?
      parentDom.removeChild(domNode);
    }
  }
};

Answer (AI): Instance는 VDom을 내포하고, VDom은 실제 DOM이 아닌 경우가 있다! Fragment와 Component는 실제 DOM이 아니다. 그 안에 있는 실제 DOM을 가져와 그것을 삭제해야한다. 그래서 ‘getDomNodes(instance)’ 를 호출해 하위 모든 children을 가져오는 것이다.

2. 'createElement' 함수를 호출하는 곳은 어디지? 호출 코드를 찾을 수가 없어.
   Answer (AI): JSX를 변환하는 과정에서 자동으로 호출된다. 어떤 변환 함수를 부를지는 Vite에서 설정 가능하다.

3. 어째서 node.type이 string 값이면 HTML 요소야?
   Answer (AI): JSX의 작동 방식 때문이다.

• 소문자로 시작하면 => HTML 요소 (문자열)
• 대문자로 시작하면 => 컴포넌트 (함수참조)
• 특수한 경우 => Fragment, Text Node (심볼)

기술적 성장

코드 품질

AI가 작성해서...(없습니다!)

학습 효과 분석

• 단계별로 AI와 페어 프로그래밍으로 구현했다. AI가 React를 구현한 코드 전체를 바로 보는게 아니라, 하나씩 구현해가며, AI가 디버깅하고 생각하는 과정까지 다 지켜봤는데, 코드를 이해하는데 도움이 되었다.
• 테스트 코드가 있으니까 AI가 그거에 맞게 더 잘 작성하는것 같습니다! 미래에 개발자는 테스트 코드도 잘 작성해야 할 것 같네요..!?

과제 피드백

• 항해가 아니었다면, 리액트를 직접 구현해보겠다! 라는 생각을 절대 못했을 것 같아요. 난이도가 정말 높은 과제다보니, 처음 10분 고민하다가 바로 AI를 꺼내들었습니다ㅎㅎ AI가 코드를 작성하고 그걸 이해하는것도 이번 주차에 충분히 많은 공부가 될 것 같았어요. 실무에서 거의 쓰지 않던 queueMicrotask 라던가 symbol이라던가 dom 다루는 api 등등 다양한 유형의 코드가 있어서 그걸 보는것만으로도 많은 공부가 되었습니다!
• 역으로 구현해보면서, 오픈소스를 공부해보는 기분이 들었습니다. 물론 실제 react는 훨씬 복잡하겠지만, 그 안에 쓰인 핵심 개념들을 직접 구현하다보니 그 지식이 더 터득되는 것 같습니다 :)

리뷰 받고 싶은 내용

(없습니다!)

[joshuayeyo]

항해가 아니었다면, 리액트를 직접 구현해보겠다! 라는 생각을 절대 못했을 것 같아요. 난이도가 정말 높은 과제다보니, 처음 10분 고민하다가 바로 AI를 꺼내들었습니다ㅎㅎ AI가 코드를 작성하고 그걸 이해하는것도 이번 주차에 충분히 많은 공부가 될 것 같았어요. 실무에서 거의 쓰지 않던 queueMicrotask 라던가 symbol이라던가 dom 다루는 api 등등 다양한 유형의 코드가 있어서 그걸 보는것만으로도 많은 공부가 되었습니다!

매우 인정합니다,, 저는 리액트 직접 구현해보면서, 이게 JavaScript 기능이었다고? 싶은 모먼트가 되게 많았던 것 같아요.