React STEP 2 - 프로젝트 구조 분석

⭐ 프로젝트 구조

전체적인 구조

• 프로젝트의 진입점인 src/index.js 를 살펴보면, 

• import 구문
  ✅ React와 ReactDOM 가져오기
  ✅ CSS 파일(index.css) 가져오기
  ✅ 메인 컴포넌트인 App 가져오기
  ✅ 웹 성능 측정을 위한 reportWebVitals 가져오기
• const root = ReactDOM.createRoot(document.getElementById('root'));
  ✅ ReactDOM.createRoot()를 사용해 React 18+ 방식의 root 생성
  ✅ document.getElementById('root')는 public/index.html에 있는 <div id="root"></div>
• root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  )
  ✅ document.getElementById('root')는 public/index.html에 있는 <div id="root"></div>
• reportWebVitals();
  ✅ 웹 성능 측정 함수 실행
  ✅ reportWebVitals(console.log)처럼 사용하면 성능 데이터를 로그로 확인 가능