[React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치)

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. 렌더링 과정 요약    

1. 브라우저가 index.html을 로드: 페이지가 처음 로드되면 HTML 구조가 브라우저에 표시됨.
2. main.tsx 실행: main.tsx에서 React 애플리케이션이 시작됨. createRoot를 통해 root 요소를 찾고, App 컴포넌트를 렌더링함.
3. App 컴포넌트 렌더링: App 컴포넌트가 화면에 표시됨. 이 컴포넌트는 상태를 관리하고, 사용자 인터페이스를 정의함.
4. 상태 변경 시 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를 정의하고 상태를 관리함.