CRA(Create-React-App) 를 이용하여 리액트 프로젝트를 생성해서 src 폴더 안에 있는 App.js 안에서
내용들을 작성했었지만, 이 리액트 프로젝트의 구성이 어떤식으로 이루어져서 App.js 안의 내용이
브라우저로 렌더링 되는 것인지 정리해볼 필요를 느꼈다.
// index.js 파일
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
CRA 를 통해서 리액트 프로젝트를 만들어서 npm start 를 하면 App.js 에 있는 내용들이 브라우저에 렌더링 되는데, 사실 App.js 가 바로 렌더링 되는것이 아니라 index.js 파일이 제일 먼저 실행이 된다.
그리고 위의 코드들은 자바스크립트 코드가 아닌 JSX 문법으로 쓰여진 코드들인데,
이 코드들을 브라우저가 해석할 수 있도록 자바스크립트 코드로 변환해서 브라우저로 보낸다.
하나의 예로 저 import App from './App'; 부분은 CSS 파일을 JS 코드로 변환하는 것이다.
위의 코드를 하나하나 해석해보자
import ReactDOM from 'react-dom/client';먼저 리액트 돔 라이브러리에서 ReactDOM 객체를 가져온다.
package.json 에 react-dom 이 추가되어 있는 것을 볼 수 있다.
이렇게 ReactDOM 객체를 index.js 에 가져와서 리액트가 제공하는 기능들을 사용할 수 있게 된다.
const root = ReactDOM.createRoot(document.getElementById('root'));리액트 돔을 가져와서 createRoot 메서드를 호출했다. createRoot 메서드는 React Application의 엔트리 포인트를 만들어주는 메서드고, 여기서 root 이라는 id 를 가진 요소를 선택했다.
이 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" />
<!--
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>이 index.html 파일은 브라우저에서 불러오는 파일이다. 리액트에서 유일하게 존재하는 html 파일이고 이 index.html 을 이용해서 SPA 를 구현한다.
그리고 저 id가 root 값을 가진 div 안의 내용들이 렌더링 되는 것이다.
그렇기때문에 index.js 파일에서
const root = ReactDOM.createRoot(document.getElementById('root'));위의 코드의 의미는 root 이라는 id 를 가진 요소를 엔트리 포인트로 삼겠다는 것을 리액트돔에게 알려주는 것이다.
root.render(<App />);그 후에 render 메서드를 이용해서 root 가 어떤 요소를 렌더링 해야하는지 알린다.
그리고 그 안에 App 컴포넌트를 넣음으로써 App 컴포넌트 안에 있는 내용들이 렌더링 되는 것이다.
import App from './App'; 
App.js 를 보면 다른 컴포넌트들과 마찬가지로 export 되어있는 것을 확인할 수 있고 index.js 에서 그 App.js 를 import 해와서 사용한다.
main.chunk.js 파일의 소스에서 App.js 에 관한 코드들을 볼 수 있다.
vscode 에서 App.js 에 직접 작성한 코드와는 사뭇 다른데, JSX 문법을 사용해서 코드들을 적으면, 리액트 환경의 뒷단에서 브라우저가 읽을 수 있는 코드로 해석을 해주고 브라우저에 렌더링 해준다.
