리액트 앱의 동작 원리
리액트 앱에는 어떻게 접속하는 걸까?
Create React App 으로 만든 리액트 앱에는 웹 서버가 내장되어 있다. npm run start 명령을 실행하면 브라우저가 리액트 앱에 접속하도록 앱에 내장된 웹 서버가 동작한다. 결국 내장된 웹 서버 주소로 브라우저가 자동으로 접속하는 것이다. Create React App으로 생성한 리액트 앱의 주소는 기본적으로 http://localhost:3000으로 설정되어있는 것이다. localhost는 내 컴퓨터의 주소를 뜻하며, 콜론 뒤에 나오는 3000은 포트 번호이다.
포트 번호는 컴퓨터에서 실행하고 있는 서버를 구분하는 번호이다. 컴퓨터에는 기본적으로 하나의 주소가 있는데, 이 주소로 요청을 받는다. 그런데 컴퓨터에 여러 개의 서버가 실행되고 있다면, 어떤 서버에 대한 요청인지 모호할 수 있기 때문에 서버 별로 포트 번호를 정해놓은 것이다. 해당 포트 번호에 대한 요청이 들어올 때만 응답하는 식으로 작업을 선별해 처리할 수 있다.
리액트 앱의 동작 원리
사용자가 주소 http://localhost:3000으로 리액트 앱에 대한 서비스를 요청하면, 리액트 앱 서버는 웹 페이지 파일인 public의 index.html을 보낸다. index.html에는 페이지에 표시할만한 요소가 없지만 App 컴포넌트의 내용이 페이지에 표시된다. 개발자 도구의 Element 탭을 확인해 <script>를 확인해보면, 이 태그는 /static/js/ 경로에 있는 bundle.js 자바스크립트 파일을 불러와 실행한다.
bundle은 꾸러미, 묶음이라는 뜻으로 src 폴더에 있는 자바스크립트 폴더들을 묶어놓은 파일을 말한다. 이렇게 자바스크립트 파일을 하나로 묶는 작업을 번들링이라고 하며, 그 결과인 bundle.j를 번들 파일이라고 한다.
bundle.js는 src 폴더에 있는 index.js와 이 파일을 불러온 모듈을 하나로 묶어둔 파일이다. 즉 이 코드는 index.js가 작성한 코드에 따라 동작한다.
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'));
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.js 파일이다. index.js에서는 import 문으로 App.js에 있는 App 컴포넌트를 포함해 여러 모듈을 불러온다.
ReactDOM.createRoot는 인수로 전달된 요소를 리액트 앱의 루트로 만들어 반환하는 메서드이다. 여기서 루트란 트리 형태의 돔에서 자바스크립트 함수로 작성된 컴포넌트들의 루트 요소를 가리킨다. document.getElementById('root') 돔에서 id가 root인 요소를 루트로 만들어 root라는 변수에 저장한다. id가 root인 요소는 public 폴더의 index.html에 있는 <div> 태그가 바로 그 루트 요소이다.
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);변수 root에는 리액트의 루트가 저장되어 있다. render 메서드는 인수로 리액트 컴포넌트를 전달하는데 이 컴포넌트를 돔 루트에 추가한다. 따라서 render 메서드가 수행되면 메서드 안의 리액트 컴포넌트가 돔에 추가되어 페이지에 나타난다. 따라서 App 컴포넌트를 돔 루트에 추가하므로, 페이지에 App 컴포넌트에서 정의한 HTML요소가 표시된다.
결국 리액트 루트 요소 <div id='root'>를 클릭하면 해당 요소 아래App 컴포넌트가 반환하는 HTML 요소가 추가되어있는 것을 확인할 수 있다.
정리해보자면
- localhost:3000으로 접속하면 public 폴더의 index.html을 반환한다.
- index.html에는 src 폴더의 index.js와 bundle.js를 불러온다.
- bundle.js가 실행되어 index.js에서 작성한 코드가 실행된다.
- index.js는 ReactDOM.createRoot 메서드로 돔에서 리액트 앱의 루트가 될 요소로 지정한다.
- render 메서드를 사용해 돔의 루트 아래 자식 컴포넌트를 추가한다. 결과적으로 App 컴포넌트가 렌더링된다.
