[TIL] 2023-01-14

• 리액트 동작 원리에 대해서 공부 중, 리액트의 핵심 요소 중 하나 가상 dom에 대해서 알아봄
  • 가상DOM을 이해하기 위해 DOM(문서 객체 모델)의 기본 내용 숙지 (HTML 요소, 자바스크립트만 사용한 물리DOM과 비교하는 형식으로 학습)

import React from 'react';
import ReactDOM from 'react-dom/client;

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

const virtualDOM = React.createElement('p', null, 'Hello world');

root.render(virtualDOM);

코드를 설명하면 핵심

리액트는 React.createElement 함수로 다양한 HTML 요소를 가상 DOM 트리 구조로 구현한 뒤, render 메서드가 호출되는 순간 이 가상 DOM 트리를 물리 DOM 트리로 변환해줍니다.

• 왜 가상DOM을 사용하는가?

  임의의 물리DOM 트리에서 일부 HTML 요소의 속성값을 변경할 경우, 해당 HTML 요소를 찾아서 DOM 객체를 얻은 다음, 작업을 해야하는 데 이는 요소를 찾기 위해 사용하는 id 속성값이 HTML 요소가 많아질수록 중복되지 않게 새로 만들어야하기 때문에 쉽지 않다. 하지만 가상DOM 객체를 만들어서 물리DOM 객체에 연결하는 것으로 이런 문제가 해결이 가능하기 때문에 가상DOM을 사용한다.

[참고 자료]

https://www.notion.so/TIL-2023-01-14-20a83832076a4ed9b7a58f176b96a5b9 구체적인 내용 정리