본문 바로가기

Language/React

[개념] React의 동작 과정

리액트 앱에 접속하는 원리
  • create-react-app으로 생성된 리액트 앱에는 웹 서버(예: webpack-dev-server)가 내장되어 있음
  • npm run start 명령을 실행하면 이 웹 서버가 동작하며 브라우저를 자동으로 http://localhost:3000 주소로 연결 함
리액트 앱이 동작하는 원리
  • 요청 : 브라우저에서 http://localhost:3000으로 요청
  • index.html 반환 : 내장 웹 서버는 리액트 앱의 기본 HTML 파일인 public/index.html을 반환
  • 빈 <div> 태그 활용 : index.html의 <body> 태그에는 <div id="root">만 존재
    → 이는 리액트 앱의 루트 요소로 사용
// public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
  • 번들링된 bundle.js 실행
    • <script defer src="/static/js/bundle.js"> 태그가 index.html에 자동으로 추가
      → 바로 위의 index.html 코드에서는 <title> 태그 아래에 <script> 태그가 존재하지 않음
    • bundle.js : React 코드와 의존성을 한데 묶어 번들링한 파일

  • ReactDOM과 컴포넌트 렌더링
    • src/index.js에서 ReactDOM.createRoot() 메서드를 호출하여 <div id="root">를 루트로 지정
    • root.render(<App />)를 통해 App 컴포넌트를 렌더링
    • 결과적으로 App.js에서 정의된 HTML 구조가 브라우저 화면에 표시
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

bundle.js
  • 리액트 프로젝트 구조에서는 static 폴더가 없어 index.html에서 bundle.js가 추가되도 App.js에 정의한 것이 어떻게 index.html에 적용이 되는 것인지 의문을 갖게 됨
static 폴더가 보이지 않는 이유
  • 리액트 개발 서버(npm start)를 실행하면 내부적으로 웹팩(Webpack)이 애플리케이션의 자바스크립트, CSS, 이미지 등을 번들링
  • 번들링된 결과는 실제로 메모리에 저장되며, 개발 모드에서는 파일 시스템에 static 폴더를 생성하지 않음
  • 따라서 프로젝트 디렉토리에서 static 폴더를 볼 수 없지만 개발 서버는 이를 가상으로 제공
bundle.js 파일의 역할

 

  • 리액트 프로젝트의 소스 코드와 의존성들이 번들링되어 하나의 파일 또는 여러 파일로 압축
  • 번들링된 파일 중 하나인 bundle.jsHTML의 <script> 태그를 통해 애플리케이션에 로드
실제 static 폴더 확인
  • 프로젝트에서 npm run build 명령을 실행하면, build 폴더가 생성 됨

bundle.js 확인
  • 브라우저 개발자 도구(F12)에서 Network 탭을 열고 페이지를 새로 고치면, 실제로 bundle.js가 로드되는 것을 확인 가능

  • 개발 서버에서는 번들 파일들이 가상으로 제공되며, http://localhost:3000/static/js/bundle.js 경로에서 접근 가능

bundle.js 일부
App.js


최종 정리
ReactDOM.createRoot()와 App.js

 

  • index.js에서 리액트 애플리케이션의 진입점(entry point)을 설정
  • ReactDOM.createRoot() 명령어로 index.html의 <div id="root"></div> 요소를 리액트 애플리케이션의 마운트 지점으로 지정
  • 마운트 지점에 App.js가 렌더링되며 App.js는 애플리케이션의 최상위 컴포넌트
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
bundle.js와 의존성 묶음
  • 리액트 앱을 실행하면 webpack(또는 다른 번들러)이 다음 작업을 수행
    • index.js를 시작점으로 프로젝트의 모든 파일(컴포넌트, 스타일, 이미지 등)을 분석
    • 의존성 트리를 생성해 프로젝트의 모든 필요한 자원하나 또는 여러 개의 번들 파일로 압축
    • 기본적으로 bundle.js라는 이름의 파일에 묶이며 이 파일이 애플리케이션 전체를 포함
<script> 태그와 자동 추가
  • 리액트 개발 서버(npm start)를 실행하면 webpack-dev-server가 동작
  • 개발 서버는 index.html 파일의 <head>에 자동으로 <script> 태그를 추가하여 bundle.js를 로드
<script src="/static/js/bundle.js"></script>
bundle.js가 포함하는 내용
  • index.js의 코드
  • App.js 및 기타 컴포넌트의 코드
  • 애플리케이션 실행에 필요한 React 라이브러리모든 의존성
요약
  • index.js는 <div id="root">를 가져와 ReactDOM.createRoot()로 마운트 지점을 지정
  • App.js는 최상위 컴포넌트로 애플리케이션 전체가 여기에서 렌더링
  • bundle.js index.js, App.js, 의존성을 모두 묶은 파일로 브라우저가 이 파일을 로드하여 리액트 앱을 실행
  • 실행 시 <script src="/static/js/bundle.js"></script>가 index.html의 <head>에 자동 추가

 

'Language > React' 카테고리의 다른 글

[개념] React 프로젝트 구조  (0) 2025.01.02
[개념] List와 Key  (0) 2025.01.01
[개념] 렌더링과 조건부 렌더링  (0) 2024.12.31
[개념] React Hook  (0) 2024.12.30
[개념] React의 개념, 컴포넌트, JSX, Props, State  (1) 2024.12.26