목표인 React 렌더링 엔진의 본질을 바닐라 JS로 직접 구현하기 위한
최종 확정 커리큘럼을 아래와 같이 구성함.
🎯 목표
JSX를 제외한 Babel 이후의 단계부터
React의 렌더링 엔진이 실제로 수행하는 VDOM 생성, 비교(diff), DOM patching 과정을 직접 구현한다.
✅ 전체 로드맵: 2주 완성형 렌더링 엔진 구현 커리큘럼
📅 구성 원칙
- 총 14일 (1일 2~4시간 기준)
- 역할 단위로 구성 (create → render → diff → patch → rerender)
- 매 단계마다 반드시 얻어가야 할 개념 명시
🔷 1주차: 렌더링 엔진 구조 설계 및 구현
✅ Day 1: createElement – VDOM 생성기 만들기
- JSX 없이 UI 구조를 직접 JS 객체 트리로 만드는 함수 구현
✅ 반드시 얻어야 할 개념
- VDOM이란? 왜 필요한가?
- JSX는 어떻게 JS 객체로 바뀌는가?
- VDOM의 기본 구조: { type, props, children }
✅ Day 2: render – VDOM을 실제 DOM으로 렌더링
- VDOM을 순회하며 실제 DOM 노드 생성
- 텍스트 노드 처리 (TEXT_ELEMENT)
- 속성 처리 (props, 이벤트 등)
✅ 반드시 얻어야 할 개념
- 선언형 UI → 명령형 DOM 조작 방식으로 어떻게 연결되는가
- 재귀적으로 트리를 순회하며 렌더링하는 패턴
- 속성과 이벤트 바인딩의 실제 작동 방식
✅ Day 3: 수동 리렌더 시뮬레이션
- 기존 vdom1을 render
- 새로운 vdom2을 render
- 변화되는 부분 파악 (diff 도입 전 단계)
✅ 반드시 얻어야 할 개념
- DOM 전체를 다시 그리는 것의 한계
- “무엇이 바뀌었는지”를 추적해야 하는 이유
✅ Day 4: diff(old, new) – VDOM 비교 알고리즘
- type이 다르면 replace
- props가 다르면 update
- 자식 노드는 재귀적으로 비교
✅ 반드시 얻어야 할 개념
- Virtual DOM diffing의 설계 철학
- shallow comparison vs deep comparison
- 왜 key 기반 비교가 필요한가 (향후 확장을 위한 베이스)
✅ Day 5: patch – 최소 DOM 수정 로직 구현
- diff 결과에 따라 insert / remove / update 수행
- 텍스트 교체, 속성 갱신, 노드 삭제
✅ 반드시 얻어야 할 개념
- DOM 변경은 비용이 크다는 점
- “최소 DOM 변경”을 위한 의사결정 구조
- patch가 render와 완전히 다른 책임을 가진 이유
✅ Day 6: 테스트 시나리오 제작
- 카운터 UI: 버튼 클릭 → 수동 상태 변경 → render 실행
- DOM 변경 여부 로그 출력
✅ 반드시 얻어야 할 개념
- 렌더링 로직의 검증 방법
- 상태 기반 렌더링과 VDOM의 연결 구조 테스트하기
✅ Day 7: render 흐름 단위 분리 (reconcile + commit)
- render = reconcile + commit
- 재귀 로직 분리, 역할 구분
✅ 반드시 얻어야 할 개념
- React가 render와 commit phase를 나누는 이유
- 트리 순회 + 실제 DOM 작업의 분리 구조 이해
🔷 2주차: 상태 변화 흐름과 동적 리렌더링 완성
✅ Day 8: useState – 상태 저장 및 rerender 연결
- 상태 저장 구조 (hooks 배열)
- setState → 해당 컴포넌트 rerender 트리거
✅ 반드시 얻어야 할 개념
- 상태 변경 → render 재실행 흐름
- hook index를 기반으로 상태 매핑하는 구조
- 렌더 트리거와 diff 연결
✅ Day 9: rerender(Component) 구조 설계
- 상태 변경된 컴포넌트만 새 VDOM 생성
- 이전 VDOM과 비교 → DOM patch
✅ 반드시 얻어야 할 개념
- 컴포넌트 단위의 독립적 리렌더링 구조
- React가 전체 앱을 다시 그리지 않는 원리
- 렌더 엔진의 부분 업데이트 설계
✅ Day 10: useEffect – side effect 구조
- 렌더 이후 effect 실행
- deps 배열 비교
✅ 반드시 얻어야 할 개념
- effect는 DOM 작업이 끝난 뒤 실행되어야 함
- deps 배열로 성능 최적화
- mount vs update 판단 기준
✅ Day 11: key 기반 리스트 diff (선택 과제)
- 자식 배열 비교에 key 적용
- insert/remove 최적화
✅ 반드시 얻어야 할 개념
- key의 필요성 (순서 변경 vs 내용 변경)
- 리스트 재조합이 diff에 미치는 영향
✅ Day 12: 간단한 scheduler 도입 (선택 과제)
- batching: setTimeout or requestIdleCallback
- render 큐 처리
✅ 반드시 얻어야 할 개념
- React가 “지금 바로 렌더링 안 하는 이유”
- 연산 분할과 성능 최적화 구조
✅ Day 13: 통합 시나리오 테스트
- Counter
- TodoList
- 조건부 렌더링
✅ 반드시 얻어야 할 개념
- 전체 렌더링 흐름을 손으로 trace 가능해야 함
- 상태 → VDOM → diff → patch의 완전한 연결
✅ Day 14: 문서화 및 리팩터링
- /core/ 디렉토리 정리
- 흐름도 그리기
- README.md: 구현 목표, 핵심 개념, 구현 방법 정리
✅ 반드시 얻어야 할 개념
- 내가 만든 구조를 누가 봐도 이해 가능하도록 설명할 수 있어야 함
- 문서화를 통해 전체 설계 감각 정리
📁 예상 디렉토리 구조
/react-render-core/
├── index.html
├── main.js
├── core/
│ ├── createElement.js
│ ├── render.js
│ ├── diff.js
│ ├── patch.js
│ ├── state.js ← useState 구현
│ ├── effect.js ← useEffect 구현
│ └── scheduler.js ← 선택
├── components/
│ ├── App.js
│ └── Counter.js
├── README.md
앵맹!