React Under the Hood

React의 내부 동작 원리를 이해하기 위한 간단한 React 구현체.

Fiber 기반 렌더링 구조와 기본적인 useState 훅을 구현하여 React 16~17 버전의 핵심 메커니즘을 학습할 수 있다.

📋 주요 기능

• Fiber 아키텍처: React의 Fiber 기반 렌더링 구조 구현
• Virtual DOM: 가상 DOM을 통한 효율적인 렌더링
• Reconciliation: Fiber 노드 비교 및 DOM 업데이트 최적화
• useState Hook: 기본적인 상태 관리 훅 구현
• Component: 함수형 컴포넌트 지원
• JSX: createElement를 통한 JSX 변환

🏗️ 프로젝트 구조

src/react/
├── element/          # JSX 요소 생성 (createElement)
├── dom/              # DOM 생성 및 업데이트 로직
├── reconciler/       # Fiber 노드 조정 및 렌더링 로직
├── component/        # 컴포넌트 렌더링
├── state/            # 상태 관리 (useState)
└── utils/            # 유틸리티 함수

🚀 시작하기

설치

npm install

개발 서버 실행

npm run dev

빌드

npm run build

🛠️ 기술 스택

• TypeScript: 타입 안정성
• Vite: 빌드 도구
• Vitest: 테스트 프레임워크