[React] 공식문서 공부 - 엘리먼트 렌더링

| 엘리먼트 렌더링 하기

1. 엘리먼트

리액트에서 엘리먼트는 리액트 앱의 가장 작은 단위라고 합니다.

const element = <h1>hello, world</h1>;

엘리먼트는 화면에 표시할 내용을 기술합니다.

2. 렌더링 하기

HTML파일에

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

이런 div요소가 있다고 하면

이 요소를 ReactDOM.crearteRoot()에 전달하여 root 엘리먼트를 만들어주고

화면에 표시하고 싶은 리액트 엘리먼트를 root.render()에 전달하면 됩니다.

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

이런 식으로 코드를 실행하면

화면에 hello, world가 보입니다.

3. 엘리먼트 업데이트

리액트 엘리먼트는 불변객체이기 때문에 

엘리먼트를 한번 생성한 후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다고 합니다.

따라서 UI를 업데이트하려면 새로운 엘리먼트를 만들고

이를 root.render()로 전달하면 됩니다.

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

function time() {
  const element = (
    <div>
      <h1>시간</h1>
      <h2>{new Date().toLocaleTimeString()}</h2>
    </div>
  );
  root.render(element);
}

setInterval(time, 1000);

이런 식으로 setInterval()을 사용해서 일정한 간격을 두고 계속 전달하면 됩니다.