2. 실행 흐름 이해하기

1. 실행 과정

---

package.json 은 해당 프로젝트를 관리하는 설정 파일

1. npm start 시 index.js를 실행시킴
   package.json
2. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
3. index.js의 ReactDOM.render() 함수가 실행되는데 이때 render 함수를 통해 페이지의 그림이 그려진다.
   index.js에 렌더링할 함수 존재
4. //0. React 엔진 - 데이터 변경 감지해서 UI 그려주는!! // 1. 실행과정(index.html) - SPA(Single Page Application) // 2. JSX 문법 function App() { return <div>안녕1</div>; // function에 들어가는 문법은 jsx 문법 }
5. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <App /> // JSX 문법 document.querySelector('#root')// index.html 에서 id가 root인 것을 찾아 위의 렌더링 함수의 return 값을 집어넣는다. );