React #2 - 엘리먼트 랜더링

React #2

---

엘리먼트 렌더링

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

 

• React 엘리먼트를 렌더링 하기 위해 DOM 엘리먼트를 ReactDOM.createRoot()에 전달 후 root.render()에 전달해야 한다.

 

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

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

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

setInterval(setTime, 1000);

 

• React 엘리먼트는 불변객체이므로 엘리먼트가 생선 된 후 엘리먼트의 자식 또는 속성을 변경할 수 없기 때문에 UI를 업데이트하는 유일한 방법은 엘리먼트를 root.rander()로 전달하는 것이다.
• 위 코드를 실행시켜 보면 매초 전체 UI를 다시 그리도록 설계했지만 내용이 변경된 텍스트 노드만 업데이트할 것이다. 왜냐하면, React Dom은 이전의 엘리먼트와 비교하고 필요한 경우에만 DOM을 업데이트하기 때문이다.

 

 

 

참조 : https://ko.legacy.reactjs.org/docs/introducing-jsx.html