React 엘리먼트

React 엘리먼트 렌더링

• 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며 ReactDOM은 React 엘리먼트와 일치하도록 DOM을 업데이트함. 모든 elements를 ReactDOM에서 관리하기 때문에 루트DOM 노드라고 부름.

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

• React 엘리먼트는 불변객체임. 그러므로 UI를 업데이트하는 유일한 방법은 새로운 element를 생성하고 이를 ReactDOM.render()로 전달한 것.

const tick = () => {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    <React.StrictMode>{element}</React.StrictMode>,
    document.getElementById("root")
  );
};

setInterval(tick, 1000);