[React] #1.2 How does React work (#코딩공부)

https://youtu.be/9yITc-uEjwI

---

<복습>

https://wook-2124.tistory.com/125

[React] #1.1 Creating a Github Repository (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

---

1. import React from "react"

App.js와 index.js 파일 빼고 다 지운 뒤 App.js에 react를 import하고 function App을 만들어 div를 추가했다.

 

HTML을 나타내고 있는 index.html의 div id="root"에 문구를 적지 않았지만,

 

div id="root"안에 App.js에 적은 div가 rendering(표현)되고 있다.

---

2. ReactDOM.render - DOM(Document Object Model)

이런식으로 체크한 div 사이에 React Application이 rendering(표현)된다.

 

그 원리는 index.js에서 알 수 있는데, index.js에서 react와 react-dom을 import하고, App.js 파일을 rendering하기 위해 import 해온다.

 

다음으로 ReactDOM.render로 function App을 가지고 와서 <App />으로 닫고, index.html에 div id="root"를 찾아서 App을 표출해줄 장소를 정하면 된다.

---

3. Component

다시 index.js로 rendering하고 있는 App.js의 div에 <h1> React Component를 만들었고, index.html의 div 안에서 h1, React Component가 index.js로 인해 rendering되고 있는 것을 알 수 있다.

 

index.html의 소스코드를 보면 <h1> component는 보이지 않는다.

 

React가 빠른 이유는 virtualDOM(가상 Document Object Model)로써 소스코드(index.html)에는 존재하지 않지만, React Component(각각의 컴포넌트)를 react-dom을 통해 추가로 rendering(표현)할 수 있기 때문이다.