React DOM, 리액트는 어떻게 돌아가는가?

• 리액트란?

자바스크립트의 UI 라이브러리로, "상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리"

그리고 이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택

• Component 기반
• Virtual DOM 사용
• JSX 문법 사용

 

• DOM(Document Object Model)

웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 단어 그대로 정리하면 문서 객체 모델

MDN에서의 정의 HTML, XML 문서의 프로그래밍 interface

DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할로, 브라우저는 CSS, HTML, 그리고 순수 자바스크립트 3 가지만 이해한다. 서로 다른 부분은 Babel을 통해 순수 자바스크립트로 변환을 시켜 줘야 한다.

바벨은 패지키 잠금 파일이기에 Package.json에서 확인 되지 않고, yarn.lock에 위치한다.

src 폴더 내부의 index.js에 가면 확인할 수 있는 코드

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./app";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

react-dom 라이브러리에서 ReactDom을 사용해 render 함수 실행

리액트의 문법을 DOM을 통해 연결

 

🤯 문제점

DOM은 새로운 요청이나 변경사항 발생 시 매번 리 랜더링을 함 ➡ 속도 저하

그로 인해 가상돔(Virtual DOM)을 사용하게 됨

 

Virtual DOM 사용 : 빠른 화면 출력 속도

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 

그림을 찢어서 새로 그리는 게 아니라, 지우개로 수정할 부분만 수정

• DOM의 구조를 흉내낸 JavaScript  객체이다. (트리구조)
• in-memory에 존재해서 실제 렌더 되지 않는다.

 

이미지 출처 : https://tonynguyenit.medium.com/how-react-virtual-dom-decide-to-update-browser-dom-91f170718733