smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)

노마드코드님의 유튜브를 즐겨보는 구독자로서, 무료로 풀어두신 클론코딩 강의를 들어보고자 한다:)
드디어 본격적인 react 시작…!!
오늘은 react의 동작원리에 대해 알아볼까 한다.
React로 영화 웹서비스 만들기
저번편은 여기로

How does React work?

index.js

```import reportWebVitals from './reportWebVitals';```  
```import './index.css';```  
```reportWebVitals();```  
이 줄을 모두 지운다.

logo.svg, serviceWorker.js, index.css, App.test.js, App.css 삭제

src 폴더 내에서 App.js / index.js 를 제외한 모든 파일을 삭제한다.

App.js

```import logo from './logo.svg';```  
```import './App.css';```   
를 지우고, '<div>' 태그 안의 내용들도 모두 지운다.  
```import React from "react";```   
를 import한다.  
따라서 
```
    import React from "react";

    function App() {
        return (
            <div className="App" />
        );
    }

    export default App;
```  
이 내용만 남게된다.  
<br><br>



react의 작동원리

react는 index.html의 ‘<div>’ 사이에 쓰는 모든 요소를 생성한다.
react는 모든 react application을 ‘div’ 사이에 넣는다.
이미지1
elementById를 기준으로 app.js의 값이 index.html에 들어가게 된다.

어떤 말이냐면, index.html에 id가 root인 태그가 있고
index.js의 ReactDOM.render에 ‘root’를 적어주었을 때, app.js에 function App() { return <div>Hello!!!!</div>; }
를 입력하게 되면, index.html의 id=root 태그에 app.js 의 값이 박히게 된다.
이미지2

이미지3
바로 이렇게~!!
이것이 바로 react가 작동하는 방법이다. ㅎㅎㅎ


react가 빠르게 작동하는 이유도 바로 이것때문이라고 할 수 있다.
react는 소스코드에 처음부터 HTML을 넣지 않고,
HTML에서 HTML을 추가하거나 제거하는 방법을 알고 있다.
그래서 application이 로드될때, 빈 application이 로드되고
그 뒤에 react가 HTML을 밀어넣는 것이다.(내가 작성한 코드같은..)
Virtual 스타일이다. 실제로는 존재하지 않지만 존재하는 것처럼 보이게 하는!

참고