리액트 프레임워크의 기본 구성 3요소

• 가상 DOM
• JSX 구문
• 컴포넌트

DOM이란?

웹 브라우저는 HTML 형식의 문자열을 화면에 출력할 때 문자열을 분석(Parsing)하여 자바스크립트 객체 조합으로 바꾼다.

이러한 형식의 자바스크립트 객체는 모두 자신의 특징에 맞는 인터페이스를 구현하는데, 이들 인터페이스를 총칭하여 문서 객체 모델(Document Object Model, DOM)이라 한다.

HTML 요소 생성

// 기존 물리DOM 이용 시
let pPhysicalDOM = document.createElement('p')
pPhysicalDOM.innerText = 'Hello World!'
document.body.appendChild(pPhysicalDOM)

// 리액트의 가상DOM 이용 시
const pVirtualDOM = React.createElement('p', null, 'Hello World!')

root.render(pVirtualDOM)

React의 가상DOM