[React] React Element

React Element

: 리액트 앱의 가장 작은 단위로 화살표에 표시할 내용을 기술

• DOM을 그대로 반영

---

DOM에 엘리먼트 렌더링

• React로 구현된 애플리케이션은 기본적으로 하나의 루트 DOM 노드가 있음

<div id="root"></div>

렌더링 순서

1. ReactDOM.createRoot()에 DOM 엘리먼트 전달
2. React 엘리먼트를 root.render()에 전달
   
   

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

---

 렌더링 된 엘리먼트 업데이트

React 엘리먼트는 기본적으로 생성한 뒤 자식이나 속성을 변경할 수 없음.
이를 변경하기 위해서는 새로운 엘리먼트를 생성하여 root.render()로 전달해야 함

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

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);