React #2 (가상 DOM + JSX)

 

바닐라 JS (물리 DOM)

let pPhysicalDOM = document.createElement("p"); // 물리 DOM 객체
pPhysicalDOM.innerText = "Hello physical DOM wolrd!";
document.body.appendChild(pPhysicalDOM); // pPhysicalDOM 객체를 DOM 트리에 추가해줌

 

 

JS + React (가상 DOM)

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
const pVirtualDOM = React.createElement(
  "p", // type
  null, // props
  "Hello virtual DOM world!" // children
); // 가상 DOM 객체
root.render(pVirtualDOM); // 가상 DOM 을 물리 DOM 으로 전환해 주는 기능 (물리 DOM 의 appendChild 와 같은 기능), 가상 DOM 객체의 렌더링을 수행

 

 

ReactDOM 으로 React 앱의 시작점 구현 후 →  React.createElement 함수로 가상 DOM 객체를 만들어서 →

render로 실제 DOM 으로 변환한다.

 

 

 

 

 

비교

 

 

 

 

 

 

 

JSX = JavaScript XML

- XML 구문에 JavaScript 코드 결합

// JSX 로 구현
const rootVirtualDom = (
  <ul>
    <li>
      <a href="http://www.google.com" target="_blank">
        <p>go to Google</p>
      </a>
    </li>
  </ul>
);

 

 

사실 이 JSX라는 게, React.createElement로 쓰기 너무 불편하니까 만들어진 것.

HTML과 구조도 비슷해서 읽기 쓰기 둘다 편하다.

 

JSX 코드 → Babel이 React.createElement로 변환 → 가상 DOM 객체 생성 → 실제 DOM으로 렌더링