처음 yarn create react-app 이후, yarn start 로 열어보면 아래와 같이 index.html와 bundle.js 등등이 로드되는것을 확인 할 수 있다.
index.html 을 살펴보면,
<head>에는 seo를 위한 메타 태그들이 있고, body에는 id가 root라는 태그하나만 존재하는 것을 볼 수 있다.
그런데 어떻게 다른 요소들이 표현될까 ? 이것은 bundle.js가 있기 때문이다. 프로젝트를 브라우저에 보여주기 이전에 webpack이 어플리케이션의 코드와 리액트 코드를 압축 / 묶어서 하나의 파일로 bundling을 해준다.
포인트는 사용자가 html을 받았을때, html 안에는 react-dom을 이용해 매핑되는 root 태그 이외에는 아무 것도 없다는 것이다. 리액트는 CSR(Client Side Rendering) 이기때문에, 어플리케이션 코드와 리액트 코드가 함께 브라우저에 전송이 되면서 클라이언트 사이드에서 필요한 UI 요소를 동적으로 생성한다.
처음에는 <div id=’root’> 를 보내지만, 브라우저 상에서 필요한 요소들을 동적으로 생성해서 넣어준다.
index.js 에서 root 생성 및 연결
실제로 /src/index.js 에 보면 root 를 지정하여 생성하고, 그 root에 <App /> 을 연결하는 것을 볼 수 있다.
root.render()시에 <App />이 <React.StrictMode>로 감싸져있는 것을 볼 수 있는데, 이것은 개발 모드에서 자바스크립트의 ‘use strict’ 처럼 개발할때 조금 더 엄격한 모드에서 개발할 수 있게끔 해주는 것이다. (자바스크립트처럼 코드가 잘못 작성된 경우 경고를 받아볼 수 있음.실제 배포시에는 해당 태그가 사라지니 걱정 안해도 됨)
브라우저에 렌더링 되는 순서
- 사용자가 id가 root인 html을 다운로드 받음
- 리액트 소스, 어플리케이션 소스코드를 다운로드 받음
- 브라우저 상에서 id가 root 인 요소를 찾아서, <App /> 컴포넌트를 연결해줌
- 리액트가 내부적으로 앱 컴포넌트에 들어가서 리턴되는 jsx 문법을 확인한 다음, 브라우저에서 제공하는 createElement() 와 같은 동적으로 요소를 생성할 수 있는 api를 이용하여 동적으로 dom 요소 생성
