[React로 영화 웹 서비스 만들기] 2020/11/23_리액트 동작편

아임 레조·2020년 11월 23일
1

Mini Projects

목록 보기
1/2

App.js 파일에 <div></div>를 사용해서 Hello!를 넣어주었다.


그래서 localhost에는 Hello!가 출력되었다.


그런데 index.html 파일의 <div id="root"></div>에는 Hello!가 들어가있지 않다!


브라우저에서 '검사' 를 통해 element를 확인해보면 Hello!가 들어가있다. 이 작업을 통해서 React의 동작을 이해할 수 있다. React는 내가 React에 작성하는 모든 요소(element)를 생성한다. 자바스크립트와 함께 그 요소들을 만들고, HTML에 push한다. 모든 React application을 div 태그 사이에 넣는다.


이런 내용은 index.js 파일에서 확인할 수 있다. ReactDOM.render의 역할은 <App>에 있는 내용을 렌더링해주는 것이다(import App from './App';). 렌더링은 document.getElementById('root')의 것을 하게 되는데 그 내용이 위에서 본 index.html파일의 <div id="root"></div>이다. 만약 이 태그 안의 id="root"id="minion"으로 바꾸게되면 ReactDOM.render에 있는 document.getElementById('root')의 root와 이름이 일치하지 않기 때문에 존재하지 않아서 오류가 난다. 즉, React는 app.js 컴포넌트(Component)를 ElementById 내부에 넣으려고 한다. 하지만 존재하지는 않는다(virtual)! 존재하는 것은 root이다.


아까 그 페이지의 소스코드를 살펴보면 어디에서도 입력한 hello!를 찾을 수 없다. hello가 없는 빈 html 파일이다. React는 소스코드에 처음부터 HTML을 넣지 않고도 HTML을 추가하거나 제거하는 방법을 사용하고 있다. 그래서 application이 무언가를 로드할 때, 빈 HTML을 로드하게 되고 그런 다음 React가 Component에 작성해두었던 HTML을 밀어넣게 되는 것이다. 이게 바로 React를 빠르게 하는 이유다!

Virtual Dom(Virtual Document Object Model)이라는 개념이 등장하는데, 여기서 virtual은 '존재하지 않는다'는 의미이다. 위에서 확인했듯 소스코드에는 존재하지 않는 것을 React가 만들어낸다. 이런 작동 원리 덕분에 React는 속도가 굉장히 빠르다.

profile
어쩌다보니 백엔드 개발자/ 번아웃 없이 재밌게 개발하고 싶어요

0개의 댓글