리액트 프로젝트 index.html에 왜 script 태그가 없을까요?🤔

김철준·2024년 10월 28일

React

REACT

목록 보기

35/38

리액트를 더 자세히 이해하고 싶어 리액트와 비슷하게 SPA를 만들어보려고 하고 있습니다.

만들고자 하니 무엇부터 시작해야할지 감이 안 잡혔는데요.
우선 CRA를 통해 생성한 리액트를 프로젝트를 살펴보면서 프로젝트가 시작되는 ENTRY POINT부터 찾아봤어요!

index.html에 번들된 script를 로드하여 앱 실행

SPA 동작방식이 하나의 html 파일에 번들링된 스크립트 파일을 로드하여 앱을 실행시키는데요. 그것부터 생각하여 리액트로 프로젝트의 index.html의 코드를 훑어봤어요.

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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

src/index.tsx

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') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위는 리액트 프로젝트 내부의 index.html과 index.tsx 파일인데요.
아시다시피 index.tsx가 html div root 태그를 선택하고 모든 컴포넌트들을 로드해줍니다.

html에 js로드하는 코드가 없다?

하지만 위 코드를 보면 html에서 index.js를 로드하는 코드가 없습니다.
보통 우리가 html에서 js 파일을 불러오려면 다음과 같이 해야하잖아요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta
            name="description"
            content="Web site created using Lite"
    />
    <title>Lite App</title>
</head>
<body>
    <div id="root"></div>
    <script src="../index.js"></script>
</body>
</html>

그래서 ReactDOM.createRoot API가 스크립트를 저절로 로드를 해주는건가..? 라고 생각을 하여 오픈소소를 살펴봤는데요. index.html에 로드하는 내용의 코드는 찾아보지 못했어요.

react-scripts를 통해 번들링된 js파일을 insert!

검색해본 결과, react scripts를 통해 프로젝트를 시작하기위해 npm start를 하거나 빌드하기 위하여 npm run build를 할 때, 번들링된 js파일을 index.html에 자동으로 넣어준다고 하네요.

확인을 위해 빌드를 하고 npm run build 빌드 디렉터리의 index.html을 확인해봤는데요! 코드가 다음과 같습니다.

<!doctype html>
<html lang="en">
  <head><meta charset="utf-8"/><link rel="icon" href="/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="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title>
    
    <script defer="defer" src="/static/js/main.cca4e3f4.js"></script>
    
    <link href="/static/css/main.f855e6bc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>