feat: Reflow vs Repaint 실험 구현 및 리액트 렌더링 최적화

[PaleBlueNote]

📌 Description

브라우저 렌더링 파이프라인의 **Reflow(Layout)**와 Repaint(Composite) 단계의 성능 비용 차이를 증명하는 첫 번째 실험(Day 1)을 구현하고, 대량의 DOM 제어로 인해 발생한 UI 블로킹 문제를 최적화했습니다.

🛠️ Changes

1. 🧪 실험 기능 구현 (Core Feature)

• CPU vs GPU 렌더링 비교:
  • left/top 속성 변경 시 발생하는 Reflow 비용과 transform 변경 시의 GPU 가속 효율 차이를 시각적으로 구현.
  • 3,000개의 DOM 요소를 동시에 제어하며 stats.js를 통해 실시간 FPS 측정.
• 직관적인 UI: 슬라이딩 토글 스위치와 상태별(CPU/GPU) 설명 배너 추가.

2. ⚡️ 성능 이슈 해결 (Optimization Report)

대량의 컴포넌트(3,000개) 상태 변경 시 UI가 멈추는 Frame Drop(INP 지연) 현상을 발견하고 해결함.

• 문제 (Problem): - 렌더링 모드 전환 시 메인 스레드가 3,000개의 가상 DOM 비교(Diffing) 연산에 점유되어 토글 스위치 반응이 약 0.5초~1초간 지연됨.
• 해결 (Solution):
  1. React.memo 도입: 아이템 렌더링 부를 별도 컴포넌트로 분리하고 메모이제이션하여, 불필요한 부모 리렌더링 전파를 차단.
  2. useTransition (Concurrency) 적용: 무거운 렌더링 작업을 낮은 우선순위로 미루고, UI(로딩 스피너)를 먼저 갱신하여 Non-blocking UI 경험 제공.

📸 Screenshots

🔗 Related Issue

Closes #3