[React] 6. Rendering Elements

Elements

• 리액트 앱을 구성하는 가장 작은 블록들
• 자바스크립트 객체 형태로 존재.
• 컴포넌트 렌더링을 위해 모든 컴포넌트가 createElement를 통해 엘리먼트로 변환된다.

Elements의 특징

• immutable : 변경할 수 없는 (불변의)
• 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다.

Root DOM Node

• 모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다.

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

• 엘리먼트 생성 후 root div에 렌더링
• 렌더링 : ReactDOM.render() 사용

const element = <h1>안녕 리액트!</h1>;
ReactDOM.render(**element**, **document.getElementById('root')**);

=> ReactDOM.rentder(A, B); : A를 B위치에 렌더링

 

 

시계 만들기

Clock.jsx

import React from "react";

function Clock(props) {
  return (
    <div>
      <h1>안녕, 리액트!</h1>
      <h2>현재시간은 {new Date().toLocaleTimeString()} 이야.</h2>
    </div>
  );
}

export default Clock;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

import Clock from "./chapter_04/Clock";

const root = ReactDOM.createRoot(document.getElementById("root"));
setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

reportWebVitals();