| 엘리먼트 렌더링 하기

1. 엘리먼트

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

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

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

HTML파일에

이런 div요소가 있다고 하면

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

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

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

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

root.render(element);

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

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

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

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

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

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

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

function time() {

const element = (

<div>

<h2>{new Date().toLocaleTimeString()}</h2>

</div>

);

root.render(element);

}

setInterval(time, 1000);

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