npx creat-react-app --template typescript
실행하면 기본으로 작성되어있는 파일이지만 자세하게 어떤 코드인지 크게 생각 안하고 항상 급하게 코드부터 냅다 작성해왔다. 하지만 리액트 작동원리 이해를 위해 정리해보도록하자!
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();
컴포넌트, JXS, 리액트 훅 등 이랙트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능을 제공하는 패키지 (렌더러와 무관한 기능)
렌더링 기능과 관련된 패키지로 앱이 동작하는 환경에 따라 나눌 수 있다.
doucument.createElement
와 유사한 기능을 제공하지만 물리(실제)돔이 아닌 리액트의 가상돔을 생성한다.
가상돔은 물리돔처럼 appendChild
를 사용해 자식요소로 넣어줄 수 없다. 그렇다면 가상돔을 화면에 나타나게 하려면 어떻게해야할까?
root.render(가상돔)
을 사용하면 가상돔을 물리돔으로 변환시켤 줄 수 있다.
그런데 root.render
메서드는 가상돔을 부착할 물리돔이 필요하다. 이 물리돔이 바로 index.html 파일에 있는 id가 root인 <div>
요소이다.
즉, 물리돔인 div를 사용해 ReactRoot 돔을 만들고 render 메서드를 사용해 루트돔의 자식으로 가상돔을 물리돔으로 변환해 부착해주는 것이다.
그럼 물리돔으로 변화되었으므로 실제화면에 렌더링이된다.
앱 성능을 측정하는 기능
코드가 잘못 되었는지 판단하여 적적한 오류 메세지를 보여주는 컴포넌트
코드가 이유없이 2번 실행된다면 얘때문일 수 있다.