[4팀 김도현] Chapter2-2. 나만의 React 만들기

[kimzeze]

과제 체크포인트

배포 링크

https://kimzeze.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 비교 기반 컴포넌트 메모이제이션

과제 셀프회고

과제를 받았을 때 여전히 막막했습니다. README를 읽어도 reconciliation이 뭔지, VNode가 정확히 어떤 역할을 하는건지 감이 잘 안 왔습니다. 그래서 일단 AI AGENT를 통해 방향성을 잡고, 정말 단계별로 가이드를 주는대로 따라가면서, 해당 함수를 왜 작성해야되는지, 어떤 생각을 해야되는지, 예시는 뭐가 있는지에 대해서 최대한 문서를 먼저 만들어두고, 해당 스텝들을 따라가는 형태로 진행하였습니다.

초반에는 shallowEquals, deepEquals 같은 유틸리티 함수들이 왜 필요한지 이해가 안 갔는데, AI에게 "왜 Object.is만으로는 안돼?"라고 질문하면서 객체 비교의 깊이에 대해 배울 수 있었습니다. 특히 배열도 객체라는 사실(typeof [] === 'object')을 처음 js공부할 때 알았던 내용인데 다시 한번 상기할 수 있었습니다.

DOM 부분에서는 Property와 Attribute의 차이를 몰라서 한참 헤맸습니다. input에 value를 설정했는데 화면에 안 나타나서 "왜 안되지?"하고 AI에게 물어봤더니 setAttribute가 아니라 dom.value =로 직접 설정해야 한다는 걸 알게 됐습니다.

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

Hook이 배열에 저장되는 이유

useState를 구현할 때 왜 Map<path, 배열>로 저장하는지 이해가 안 갔습니다. AI가 설명해준 내용:

• React는 변수명을 모른다
• 오직 "몇 번째로 호출됐는지"만 기억한다
• 그래서 배열 인덱스(cursor)로 접근한다

이걸 듣고 "그래서 조건문 안에 Hook 쓰면 안되는구나!"하고 조금이나마.. 원리에 대해서 이해했습니다.

enqueue는 왜 필요한가, 그냥 render() 호출하면 안되는지"

처음에는 setState할 때마다 바로 render()를 호출하면 되지 않나 생각했어요. AI가 예시를 들어주면서:

setCount(1); // render() 호출
setCount(2); // render() 호출
setCount(3); // render() 호출
// → 3번 렌더링! 비효율적!

이렇게 설명해주니 "아, 배치로 모아서 한 번만 렌더링하는거구나!" 이해가 됐습니다.
queueMicrotask도 처음 들어봤는데, 정말 모르는 개념이었는데 해당 관련된 부분을 실행 순서에 공부한게 좋았습니다.

3가지 큐:

1. Call Stack (동기 코드)
   ↓ 즉시 실행

2. Microtask Queue 
   ↓ 동기 끝나면 바로 실행

3. Task Queue (setTimeout 등)
   ↓ 마이크로태스크 끝나면 실행

기술적 성장

1. useState가 undefined를 반환하는 문제

테스트를 돌렸는데 useMemo에서 Cannot read properties of undefined 에러가 났습니다.
몇 시간 동안 코드를 뒤져도 원인을 못 찾았는데, 일단 AI를 통해서 디버깅하면서 해결하긴 했습니다 ㅠㅠ

1. useRef가 undefined 반환
2. useRef 안에서 useState 호출
3. useState의 hookList[cursor]에 useEffect 데이터가 들어있음!

원인: useState 초기화 조건이 hookList[cursor] === undefined만 체크해서, 다른 타입의 Hook 데이터가 있으면 초기화를 안함.

해결: !("value" in hookList[cursor]) 조건 추가

이게 해결을 잘한건지는 모르겠는데, 화면에 나오는 것 자체가 급급하여 그대로 적용하였습니다....

2. 상품 데이터가 로드되지 않는 문제

앱을 실행하면 상품이 하나도 안 나오고 로딩만 나오는 좌절이 있었습니다. Network 탭을 봐도 API 요청 자체가 안 가고 있었습니다.

이 또한 시간이 없어... AI한테 전적으로 디버깅하면서 찾았습니다.

1. "상품 데이터가 안 나와요" 문제 상항 제시...
2. 스크린샷 찍어서 보여주기
3. 중간중간 로그와 현재 상황을 스크린샷과 네트워크탭으로 AI에게 공유

AI가 한 것:

1. useEffect에 로그 추가
2. path와 cursor 확인
3. 모든 컴포넌트가 같은 path 사용하고 있다는 걸 발견
4. mountComponent에서 자식에게 새로운 path를 안 만들고 있었다는 걸 찾음
5. createChildPath 추가해서 해결

학습한 점: 버그를 찾을 때 로그를 어디에 찍어야 하는지가 정말 중요하다는 것. 그리고 시스템적으로 생각하는 게 중요하다는 것.

코드 품질

학습 효과 분석

과제 피드백

리뷰 받고 싶은 내용

Phase 5 Reconciliation부터는 거의 정신을 놓을 뻔 했습니다.

Phase 1~4까지는 그래도 따라갈 수 있었는데 Phase 5에서 갑자기 난이도가 확 올라갔습니다.....

• Key 기반 매칭 알고리즘
• Hook state migration
• Path 충돌 문제
• Two-pass 순회

Phase 5에서 막혔을 때, 어떻게 접근하는 게 좋았을까요?

Phase 1~4를 더 꼼꼼하게 복습하면서 "왜 path가 필요한지", "컨텍스트가 어떻게 관리되는지" 조금 더 깊이 이해한 후 Phase 5로 가는것이 좋았을 지... React의 Reconciliation 개념을 공식문서를 통해 먼저 공부하고 구현하는게 좋았을지 ㅠㅠ 그냥 일단 하다보니, AI 의존도가 더 높아지고, 변경되는 코드를 머리가 따라가기 힘들었습니다..

[joshuayeyo]

[Joshua] 4팀 코드리뷰

과제를 받았을 때 여전히 막막했습니다. README를 읽어도 reconciliation이 뭔지, VNode가 정확히 어떤 역할을 하는건지 감이 잘 안 왔습니다. 그래서 일단 AI AGENT를 통해 방향성을 잡고, 정말 단계별로 가이드를 주는대로 따라가면서, 해당 함수를 왜 작성해야되는지, 어떤 생각을 해야되는지, 예시는 뭐가 있는지에 대해서 최대한 문서를 먼저 만들어두고, 해당 스텝들을 따라가는 형태로 진행하였습니다.

이번 주 계속 바쁘신 것 같았는데 결국 마무리 하셨군요,, 역시 4팀 최고 멋쟁이,,👍🏻

저도 똑같았던 것 같습니다.

뭐 우뜨카라고.

하는 생각이 가장 먼저 들었던 주차였기에, 처음엔 AI를 통해 방향성을 잡았던 것 같아요.

상세 코드 리뷰는 집 도착해서 해볼게요~ 이번 주차도 고생 너어어무 많으셨습니다~!