리액트는 SPA로 사용자와의 인터렉션이 일어났을 때 화면 깜빡임없이 변경 사항만 부드럽게 바뀌어 화면에 표시해주는 UI 프레임워크입니다.
리액트가 변경사항만 바꿀 수 있게 하는 핵심 기술은 바로 Virtual DOM입니다.
기본적으로 DOM에 변경 사항이 생기면 HTML Parser -> DOM Tree -> CSSOM -> Render Tree -> Painting -> Display 라는 긴 과정을 최상위 엘리먼트부터 변경이 있는 DOM까지 다시 진행시킵니다.
반면 Virtual DOM을 사용하면 아래 그림과 같이 변화가 생긴 컴포넌트와 그 자손에 대해서만 Virtual DOM을 생성하고 변화 전 Virtual DOM과 변화 후 Virtual DOM을 비교하여 변경된 부분만 DOM Tree ~ Painting -> Display 라는 과정을 거치게 합니다.
따라서 리액트는 실제 DOM이 아니라 Virtual DOM을 조작함으로써 성능 개선과 깜빡임없는 사용성이라는 두 마리를 토끼를 잡은 셈입니다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>