[ReactJS] Rendering Elements

How to make ReactJS Elements

리액트 Elements는 자바스크립트 객체 형태로 존재하는데, 이 객체는 마음대로 바꿀 수 없는 불변의 형태이다. Element를 생성하는 createElement 함수는 다음과 같다.

React.createElement(
    type, // 'div', 'button' ...
    [props],
    [...children]
)

Elements 생성 후에는 children이나 attributes를 바꿀 수 없다. 한 번 생성된 다음에는 수정이 불가능하다는 것을 의미한다. Component를 붕어빵 틀이라고 생각하면 Element는 추출된 붕어빵 정도로 생각하면 된다.

Root DOM Node

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  </React.StrictMode>
);

Root DOM Node는 DOM의 최상단에 위치한 노드인데, 가장 핵심적인 요소이다. 위의 코드는 Virtual DOM에서 실제 DOM으로 이동하는 역할을 한다고 생각하면 된다.

---

< Source />

Clock.jsx

import React from "react";

function Clock(props) {
    return (
        <div>
            <h1>Hello, React !</h1>
            <h2>Time : {new Date().toLocaleTimeString()}</h2>
        </div>
    )
}

export default Clock;

예제 코드인데, Clock 함수는 현재 시간을 출력하는 역할을 한다. index.js에서 이 clock component를 root 노드에 렌더링 하면, 매초 새로운 현재 시간이 출력되는 모습을 볼 수 있다.

 

※ 본 게시글은 소플님의 강의 영상을 참고하여 작성되었습니다. 개인적인 공부 목적으로 사용하고 있고, 문제 시 비공개 전환하도록 하겠습니다.