React 디렉토리 구조 이해

디렉토리 구조 개요

my-app/
├── node_modules/     # 라이브러리 모음
├── public/
│   └── index.html    # 진짜 HTML, root DOM
├── src/
│   ├── index.js      # 앱 진입점, ReactDOM.render 실행
│   ├── App.js        # 메인 UI 컴포넌트
│   ├── App.css       # App.js 전용 CSS
│   ├── index.css     # 전체 스타일
│   └── 기타 컴포넌트, CSS
├── package.json      # 프로젝트 설정/의존성
└── build/            # (배포 시 생성) 최종 번들

핵심 파일 역할

파일명	설명
public/index.html	HTML 템플릿, id="root" 필수
src/index.js	React 앱의 시작, <App /> 렌더링
src/App.js	화면 UI 정의
src/App.css	App.js에 적용되는 CSS
src/index.css	프로젝트 전역 스타일

 

 

렌더링 흐름

1. public/index.html

<div id="root"></div>

 

2. src/index.js

 

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

 

3. src/App.js

function App() { 
	return <div>Hello React!</div>; 
}

 

결국 index.html의 root 요소에 React의 <App />이 삽입되는 구조입니다.