npx creat-react-app --template typescript 실행하면 기본으로 작성되어있는 파일이지만 자세하게 어떤 코드인지 크게 생각 안하고 항상 급하게 코드부터 냅다 작성해왔다. 하지만 리액트 작동원리 이해를 위해 정리해보도록하자!

✅ src/index.tsx

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') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

💠React와 ReactDOM

React

컴포넌트, JXS, 리액트 훅 등 이랙트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능을 제공하는 패키지 (렌더러와 무관한 기능)

ReactDOM

렌더링 기능과 관련된 패키지로 앱이 동작하는 환경에 따라 나눌 수 있다.

• react-dom/client: 클라이언트 사이드 렌더링 방식 웹 앱
• react-dom/server: 서버 사이드 렌더링 방식 웹 앱
• react-dom-native: 모바일 앱

💠가상돔과 물리돔 그리고 render

React.createElement

doucument.createElement와 유사한 기능을 제공하지만 물리(실제)돔이 아닌 리액트의 가상돔을 생성한다.

가상돔은 물리돔처럼 appendChild를 사용해 자식요소로 넣어줄 수 없다. 그렇다면 가상돔을 화면에 나타나게 하려면 어떻게해야할까?

root.render

root.render(가상돔)을 사용하면 가상돔을 물리돔으로 변환시켤 줄 수 있다.
그런데 root.render 메서드는 가상돔을 부착할 물리돔이 필요하다. 이 물리돔이 바로 index.html 파일에 있는 id가 root인 <div>요소이다.

즉, 물리돔인 div를 사용해 ReactRoot 돔을 만들고 render 메서드를 사용해 루트돔의 자식으로 가상돔을 물리돔으로 변환해 부착해주는 것이다.

그럼 물리돔으로 변화되었으므로 실제화면에 렌더링이된다.

💠reportWebVitals

앱 성능을 측정하는 기능

💠React.StrictMode

코드가 잘못 되었는지 판단하여 적적한 오류 메세지를 보여주는 컴포넌트
코드가 이유없이 2번 실행된다면 얘때문일 수 있다.