리액트 실행 흐름

항상 리액트를 사용할 때 이게 어떻게 작동하는지 왜 이렇게 작동하는지에 대해 생각하지 않고 일단 구현만 했다.
이제부터라도 알아가려고 한다.

먼저,
npm이나 yarn을 써서 시작을 하면 package.json에 scripts를 보면 "start": "react-scripts start",가 있는데 이게 npm start, yarn start이다. 이걸 실행하면 index.js가 실행한다.
그리고 그 안에
const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); 코드가 있는데 이건 public에 index.html파일에 root라는 것을 찾아서 <App /> 을 집어넣는다 라는 걸 말한다.
보면 body 안에 <div id="root"></div> 가 보이는데 <div id="root"></div>는 React 애플리케이션의 마운트 지점 역할을 한다.
여기에 <App />를 집어넣는다.
그래서 이제 브라우저를 실행하면 브라우저는 처음에 index.html을 로드한다. 그런 다음 번들 JavaScript(React 및 앱 코드 포함)가 실행된다. React 코드가 실행되면 id="root"를 사용하여 <App />와 같은 구성요소를 div에 삽입한다.