[React/리액트] index.js와 index.html에 대하여

개요

React 라이브러리로 개발된 애플리케이션을 웹페이지에서 처음 로드할때 index.js와 index.html로 인하여 처음 실행된다.

어떻게 진행되는지 간단히 알아보자.

src폴더의 index.js

다른 곳에서는 보이지 않지만 웹 페이지가 로드되면 제일 처음 실행되는 파일이다. 작성된 코드가 그대로 실행되는 것이 아니라 코드의 변형된 버전이 실행된다. 프로젝트 설정에서는 스크립트를 통해 코드를 변형 및 최적화하는데 그 작업이 실행되고 있는 것이다.

 

프로젝트 설정이란?

예를 들어, import './index.css'; 라는 선언으로 CSS파일을 가져오는 명령어를 실행하였지만 일반적인 자바스크립트 파일에서는 적용되지 않는 명령어임에도 실행되게 해주는 프로젝트 설정이다.

 

역할

react-dom으로부터 ReactDOM을 가져오고 있는데 리액트돔이라는 객체를 Thrid party라이브러리에서 가져온다는 뜻으로 이 라이브러리는 의존성 중 하나이며 로컬에 다운로드 및 설치되어 있다. package.json을 보면  react-dom과 react가 다운로드되어있는 것을 확인할 수 있다.

 

react-dom package -> React DOM 객체 가져오기 -> index.js로 가져오기 -> createRoot 메서드를 통해 메인 훅을 생성

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

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

 

 

 

public 폴더의 index.html

이 단일 HTML 파일이 브라우저에서 로딩되는데 오직 이 HTML파일만이 React 애플리케이션에서 실행되는데 이것을 '싱글 페이지 애플리케이션(SPA)'라고 한다.  이곳에 선언되어있는 div태그의 id="root"는 index.js에서 선언되어 App.js파일을 렌더링하는데 사용된다.