[2팀 양진성] Chapter2-2. 나만의 React 만들기

[jinseoIT]

과제 체크포인트

배포 링크

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

과제 셀프회고

이번 과제는 직접 구현하며 숙지할 시간이 충분하지 않아, 처음부터 끝까지 온전히 제 힘만으로 전체 로직을 파악하기에는 어려움이 있었습니다. 그래서 우선 AI를 적극적으로 활용해 구현을 먼저 완성한 뒤, 그 코드를 직접 뜯어보며 이해해 가는 방향으로 진행했습니다. 과제의 목표를 “완료” 그 자체보다는 학습에 두고 접근했습니다.

그동안 책과 실무 경험을 통해서만 접해왔던 React의 내부 구조를, 이번 과제를 통해 처음부터 직접 구현해 보면서 이미 알고 있던 개념은 더 단단하게 다질 수 있었고, 잘못 이해하고 있던 부분은 스스로 교정하는 좋은 계기가 되었습니다. 특히 과제에 사전에 테스트 코드가 잘 설계되어 있어 TDD 플로우를 따라가며 구현을 완성할 수 있었고, 덕분에 “어디까지 구현됐는지”, “무엇이 깨졌는지”를 테스트를 보며 명확하게 추적할 수 있었습니다. 중간중간 AI를 활용해 연관된 구현 포인트를 탐색하면서, 구현 속도와 이해도를 동시에 끌어올릴 수 있었습니다.

또한 vDOM과 Reconciliation 과정을 더 잘 이해하기 위해, 시각적인 PlayGround를 직접만들어 보며 과제를 진행하였습니다.

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

1. Context에 대한 잘못된 가정 수정

처음에는 React의 context가 실행 컨텍스트처럼 “매 렌더마다 새로 생성되는 어떤 것”이라고 막연히 생각하고 있었습니다.
하지만 과제를 진행하면서, context가 실질적으로는 싱글톤 패턴으로 상위 레벨에서 관리되는 전역 상태 컨테이너에 가깝다는 점을 몸으로 이해하게 됐습니다.
이 덕분에 “훅이 왜 호출 순서에 의존하는지, 왜 조건문 안에서 훅을 호출하면 안 되는지”에 대한 그림이 훨씬 명확해졌습니다.

2.Reconciliation에서 key의 역할을 코드 레벨로 이해

“Reconciliation 과정에서 key가 중요하다”, “index를 key로 쓰면 안 된다”는 말은 이론으로만 알고 있었습니다.
그런데 직접 diff 로직을 구현해 보면서, type과 key가 모두 같지 않으면 기존 노드를 재사용하지 않고 완전히 새로 그린다는 것,
잘못된 key 설계가 얼마나 쉽게 불필요한 unmount/mount를 유발하는지를 체감할 수 있었습니다.
이제는 “key 잘 쓰자”가 아니라, **“Reconciliation 전략을 고려해 key를 설계하자”**라는 관점으로 바뀌었습니다.

3.React Hooks 구현과 Spring의 싱글톤 Bean 감각이 연결됨

처음에는 React hooks를 직접 만드는 작업이 막연히 어렵게 느껴졌습니다. 하지만 싱글톤으로 관리되는 context에 훅 호출 정보를 쌓아가며 구현해 보니, 마치 Spring에서 싱글톤 Bean을 컨테이너에 등록하고 필요한 매서드를 꺼내 쓰는 느낌과 비슷하게 다가왔습니다.
“훅 = 함수 하나”가 아니라, 컨텍스트에 의해 라이프사이클이 관리되고 호출 순서와 인덱스로 상태가 매핑되며외부에 노출되는 것은 ‘순수 함수처럼 보이는 인터페이스’ 라는 구조적인 관점에서 재해석할 수 있어서 흥미로웠습니다.

4.useState의 비동기성, queueMicrotask로 몸으로 이해하기

useState가 비동기로 동작한다는 것은 이론적으로 알고 있었지만, 직접 queueMicrotask를 활용해서 업데이트 스케줄링과 배치 처리 흐름을 구현해 보니, “왜 바로 setState 직후에 state를 읽으면 이전 값이 나오는지”, “렌더링과 상태 업데이트가 어떻게 분리되어 있는지”
를 훨씬 명확하게 이해하게 되었습니다. 단순히 “비동기다” 수준이 아니라, 이벤트 루프와 마이크로태스크 큐 위에서 동작하는 실제 메커니즘으로 체화된 느낌입니다.

기술적 성장

1. vNode와 렌더링 파이프라인에 대한 구조적 이해

vNode를 직접구현해보며 dom Element를 비교하기위해 추상화를 진짜 잘했다 라고 생각하였습니다. 그리고 사이드로 만든 PlayGround에서는 JSX → vNode → real DOM으로 이어지는 전체 트랜스파일·렌더링 파이프라인을 직접 구현해 보며, 평소 Babel이 “당연하게” 처리해 주던 작업들의 복잡도를 몸으로 체험했습니다.

2. Hook 시스템 내부 동작에 대한 깊이 있는 이해

useState, useEffect를 직접 구현하는 과정에서, 컴포넌트 경로(Component Path)를 기준으로 훅 상태를 격리하는 구조, 훅 호출 순서를 보장하기 위한 cursor 추적, 사용되지 않은 훅의 자동 정리, cleanup 함수 관리 등 React Hook 시스템의 핵심 메커니즘을 코드 수준에서 이해했습니다.

이를 통해 “훅은 호출 순서에 의존한다”, “조건문 안에서 훅을 호출하면 안 된다”는 규칙을 단순 암기가 아니라, 컨텍스트와 인덱싱 기반 상태 매핑이라는 구조적 이해로 전환한 점이 좋습니다. 여러 컴포넌트가 어떻게 독립적인 상태를 유지하는지에 이해하게 되었습니다.

3. 고차 컴포넌트(HOC) 패턴을 통한 횡단 관심사 분리

고차 컴포넌트 레벨에서 memo·deepMemo HOC를 구현하는 과정은, 단순히 “한 번 감싸서 리렌더링을 줄였다”를 넘어, 메모이제이션이 결국 훅 시스템과 ref를 기반으로 쌓아 올린 결과물이라는 구조로 이해하였습니다.

memo HOC에서는 props의 얕은 비교(shallow compare)를 통해 불필요한 리렌더링을 줄이면서, 내부적으로는 이전 props를 ref에 보관하고 훅을 통해 생명주기를 관리하는 패턴을 직접 구현해 봄으로써, React.memo가 어떤 기준으로 “같은 props”를 판단하는지에 대한 감각을 얻었습니다.

deepMemo HOC에서는 깊은 비교를 통해 중첩 구조를 가진 컴포넌트의 리렌더링을 최적화하면서, 얕은 비교와 깊은 비교의 비용 차이, 그리고 어떤 시나리오에서 어느 쪽 전략을 선택해야 하는지까지 고민해 본 점이 의미 있습니다.

이 경험을 통해, 단일 컴포넌트 최적화를 넘어서 HOC + 훅 + ref 조합으로 횡단 관심사(cross-cutting concerns)를 분리·재사용하는 설계 패턴에 한 걸음 다가섰다고 볼 수 있습니다. 실무에서도 공통 로깅, 성능 측정, 접근성 래핑 등 다양한 공통 기능을 HOC로 추상화할 때 이 관점이 그대로 활용할 수 있을 것 같습니다.

코드 품질

AI를 활용하여 만든부분이 많아 코드 품질은 전체적으로 더 리펙토링 해야할 것 같습니다.

학습 효과 분석

minReact를 구현하며 전체적인 흐름을 명확히 파악하는 시간이었습니다.
도구로만 생각하며 사용하는것을 넘어 다른 라이브러리를 사용할때나 엣지있는 사이드 이펙트가 발생하였을때 어디서 문제가 되었는지
추론할 수 있는 힘이 크게 생긴 것 같습니다.

과제 피드백

과제에서 배울 수 있는 학습량이 생각보다 많아 일주일이 부족하다고 생각하였습니다. 이번주차가 끝난 이후에도 과제를 천천히 뜯어봐야 할 것 같습니다.

리뷰 받고 싶은 내용

이번과제는 다시 구현할때도 결국 AI를 사용하지 않으면 막히는 부분이 많아 리뷰는 개인적으로 신청할 것 같습니다ㅜ