React, Virtual Dom 특성 예제, Clock

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 App from "./App";
import reportWebVitals from "./reportWebVitals";

import Clock from "./chapter_04/Clock";

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

function tick() {
    root.render(
        <React.StrictMode>
            <Clock />
        </React.StrictMode>
    );
}

setInterval(() => {
    tick();
}, 1000);

reportWebVitals();

 

결과

 

 

출처

https://www.inflearn.com/course/처음-만난-리액트

https://github.com/soaple/first-met-react-practice-v18/tree/master/src