React 입문 | React 기본적인 구조 | index.html 탬플릿


이어서 Web 페이지의 템플릿인 “index.html"을 살펴 보자. 아래에 소스 코드를 올려 둔다. 긴 코멘트가 있지만 이것은 생략하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      ... 중략 ...
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      ... 중략 ...
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      ... 중략 ...
    -->
  </body>
</html>

이 코드는 그렇게 어렵지는 않다. 몇 가지 설명을 하겠다

%PUBLIC_URL% 문에 대해

헤더 부분을 보면 <link> 태그에 href="%PUBLIC_URL%/favicon.ico와 같이 값이 설정되어 있다. 이 %PUBLIC_URL%는 React에 제공하는 접두어로 공개 사이트 URL이 설정된다.

id="root" 태그에 대해

<body> 부분에 <div id="root"></div>라는 태그가 있다. 이 id="root"라는 것이 어디선가 본 기억이 있을 것이다. 그렇다, index.js의 ReactDOM.render 인수로 document.getElementById('root')로 지정하였던 것이다. 지정한 root가 <div id="root"></div>라는 이 태그를 가르킨다. 즉,이 태그 부분에 <App /> 컴포넌트를 포함하도록 되어 있다.

이 index.html 템플릿의 기능은 이뿐이다. 단지 <div id="root"></ div> 태그를 제공하고 여기에 컴포넌트가 포함되는 템플릿이다.