패키지.json 파일에서 아래와 같은 스크립트가 실행을 시키는 구조이다.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"여기서 react-script start는 index.js 파일을 실행 시킨다.
index.js 파일에서 아래와 같이 root.render 함수를 실행 시킨다.
무엇을 그릴지가 render 함수에 들어오는데 App 이라는 객체?를 가리키고 있는것을 볼 수 있다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);npm start를 하게되면 index.js 파일을 실행 시킨다. index.js에서 App.js를 실행시키고, document.getElementById('root') 는 어디에다 App.js를 그릴지 정한다. 여기서는 root라는 id를 찾는 것인데 어디에서 찾냐면 public 폴더안에 index.html 이라는 파일이 존재 하는데 거기에서 root 라는 id를 찾아서 App.js의 내용을 그린다.
index.html의 id root를 보면 아래와 같이 아무 내용도 없는것을 볼 수 있다. 그래서 root라는 id의 body에 App.js의 내용을 넣는다고 보면 된다. 결국 최종적으로 열리는 파일은 index.html 파일이라고 볼 수 있다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>위에서 App이라는 놈을 control 키를 누르고 클릭을 해보면 우리가 npm start를 실행하여 나온 결과물 이라는것을 볼 수 있다. 이런 방식의 문법을 JSX 문법 이라고 한다.
- App.js의 내용
import logo from './logo.svg';
import './App.css';
function App() {
return <div>안녕 하세요!!</div>;
}
export default App;실행 흐름 : npm start → index.js → App.js → index.html 실행 된다. html 파일에서는 root id값을 가지고 자리를 찾아간다.
index.js가 App.js를 호출하고 App.js의 내용을 index.html에서 그려서 화면에 표출한다.
'⭐ React (리액트) > 리액트 기본' 카테고리의 다른 글
| 6. userState (0) | 2022.05.17 |
|---|---|
| 5. 배열 수정하기 (map과 spread응용) (0) | 2022.05.17 |
| 4. 불변함수 4가지 배우기 (concat, filter, map, slice, 스프레드(전개) 연산자) (0) | 2022.05.17 |
| 3. 기본문법 이해하기 (0) | 2022.05.17 |
| 1. 리액트 개발환경 구성하기 (0) | 2022.04.29 |
