리액트 실행 흐름 [ Index.js, App.js, Index.html ]

React/기초

리액트 실행 흐름 [ Index.js, App.js, Index.html ]

뿌비 2024. 7. 12. 23:08

728x90

🔥 3개의 파일은 creat-react-app 하면 자동으로 파일이 생성된다
🔥 public 폴더 안에 index.html 파일이 src 폴더 안에 App.js, index.js 파일이 있다

🔥 index.js

제일 상위자이며 가장 먼저 react에서 실행되는 파일이다

메인 프로그램이다

// 필요한 부분만 작성
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

🔥 App.js

컴포넌트를 정의하는 프로그램이다

// 필요한 부분만 작성
function App(){    // App() >> <App/> 'JSX문법'
    return  <div>hi</div>;
}
export default App;

🔥 index.html

index.js에 의해 렌더링 된 결과가 화면에 보이게 된다

// 필요한 부분만 작성
  <body>
    <div id="root"></div>
  </body>

🔥 package.json

프로젝트를 관리하는 설정파일이며 json 형식으로 되어있다

  "scripts": {
    "start": "react-scripts start", // 리액트 실행
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

🔥 렌더링 이란? : 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정이다

🔥 실행 흐름 이해

(npm start or yarn start)를 하면 package.json 파일 안에 “react-scripts start” 가 실행된다
react-scripts start는 index.js 파일을 실행시킨다
1. index.js 파일에는 ReactDOM.render() 함수가 있는데 render > 무언가를 출력시킨다는 뜻이다
2. 함수 안에는 두 개의 파라미터가 <App/>, document.getElementById('root') 이렇게 되어있다
  풀어서 보면 ReactDOM.render() 함수가 <App/> 컴포넌트를 출력시킬 건데 어디에? document.getElementById('root') 이곳에! 이곳은 어디? index.html 파일 안에 Id 가 root 인 곳에
3. <App/>는 App.js이고 document.getElementById('root')는 index.html이다

즉 App.js 안에 있는 컴포넌트들을 index.html 파일에 id 가 root 인 곳에 렌더링 시킨다는 의미이다

※ 요약하자면, ReactDOM.render 함수, 첫 번째 파라미터를 두 번째 파라미터에 렌더링 해라!

/** index.js 파일, 필요한 부분만 작성 */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// index.js 에 있는 코드
ReactDOM.render(<App />, document.getElementById('root'));

// 위에 코드를 풀어서 이해 하려고 작성한 코드
ReactDOM.render(
<body>
    <div id="root"> // index.html
	   <div>hi</div> // app.js 파일안에 컴포넌트
    </div>
  </body>
);

🔥 실행 흐름

1. npm start or yarn start(리액트 실행)

2. index.js가 실행되면서 ReactDOM.render() 함수가 실행

3. render() 함수가 <App/> 즉, App.js 에 있는 모든 컴포넌트들을 index.html 파일에 id가 "root"인 곳에 그린다

4. 최종적으로 모든 컴포넌트들이 그려진 index.html 파일이 화면에 렌더링 된다

주의 ★ 이때 index.html 에 있는 id를 바꾸면 에러가 난다

※ Reference

https://jiwon709.tistory.com/21

[유튜브] https://www.youtube.com/watch?v=qCADzDFiVgo

728x90