반응형
Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다.

그리고 실제 생성된 폴더구조를 보면 다음과 같다

위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다.

전체 구조
project-folder/
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ ├── index.css
│ ├── assets/
│ │ ├── react.svg
│ │ └── vite.svg
├── index.html
1. index.html
역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임
주요 내용:
- <div id="root"></div> : React 애플리케이션이 이곳에 렌더링됨
- <script type="module" src="/src/main.tsx"></script> : main.tsx 파일을 로드하여 React 애플리케이션을 시작
2. main.tsx
역할 : React 애플리케이션의 진입점. 이 파일에서 React 컴포넌트를 DOM에 렌더링.
주요 내용:
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
);
- createRoot : root라는 ID를 가진 DOM 요소를 찾아서 React 애플리케이션을 여기에 렌더링
- <App /> : App 컴포넌트를 렌더링하여 애플리케이션의 주 컴포넌트를 시작
- StrictMode : React의 개발 모드에서 추가적인 경고와 체크를 수행
3. App.tsx
역할 : 애플리케이션의 주 컴포넌트로, 화면에 표시할 내용을 정의함.
주요 내용:
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
function App() {
const [count, setCount] = useState(0);
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
);
}
export default App;
- useState : React의 상태 관리 훅으로, count라는 상태 변수를 선언하고, setCount로 값을 업데이트함
- 렌더링 내용 : Vite와 React 로고, 카운트 버튼, 안내 메시지를 포함함
- 이벤트 핸들링 : 버튼 클릭 시 setCount를 통해 카운트 값을 증가시킴
4. 렌더링 과정 요약
- 브라우저가 index.html을 로드: 페이지가 처음 로드되면 HTML 구조가 브라우저에 표시됨.
- main.tsx 실행: main.tsx에서 React 애플리케이션이 시작됨. createRoot를 통해 root 요소를 찾고, App 컴포넌트를 렌더링함.
- App 컴포넌트 렌더링: App 컴포넌트가 화면에 표시됨. 이 컴포넌트는 상태를 관리하고, 사용자 인터페이스를 정의함.
- 상태 변경 시 UI 업데이트: 버튼 클릭 시 setCount가 호출되어 상태가 업데이트되고, React는 변경된 상태에 따라 UI를 자동으로 다시 렌더링함.
도식으로 표현하기
다음은 각 구성 요소 간의 관계를 도식으로 나타낸 것
[Browser]
|
v
[index.html]
|
v
[main.tsx] ---> (renders) ---> [App.tsx] ---> (manages state & UI)
| |
v v
[DOM] [User Interaction]
| |
v v
[Updates UI upon state change]
정리
- index.html : 기본 HTML 구조를 제공하고, React 애플리케이션의 진입점을 설정함.
- main.tsx : React 애플리케이션을 시작하는 진입점으로, App 컴포넌트를 렌더링함.
- App.tsx : 애플리케이션의 주 컴포넌트로, UI를 정의하고 상태를 관리함.
반응형
'IT개발 > JS 관련' 카테고리의 다른 글
[JavaScript] JavaScript 구조 분해 할당(Destructuring Assignment) (0) | 2025.02.25 |
---|---|
[React] React 프로젝트에 prettier & eslint 설치하기 (0) | 2025.02.18 |
[vue] 특정 페이지에서만 특정 클래스 추가하기 (0) | 2025.02.10 |
[vue] Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점 (0) | 2025.02.10 |
Vue.js 프로젝트 만들기 (0) | 2025.02.08 |
댓글