React 랜더링 과정에 대한 실습

1. 코드 작성 

먼저 화면 계층 구조 

chapter_04를 만들고 Clock이라는 jsx를 만든다. 

ⓐ Clock.jsx 생성

import React from "react";

const Clock = (props) => {
    return (
        <div>
            <h1>안녕 리액트!</h1>
            <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
        </div>
    )
}

export default Clock;

해당 함수는 시간을 찍는 함수이다. 

 

ⓑ index.jsx 변경

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Clock from './chapter_04/Clock';


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

setInterval 함수를 이용해서 1초마다 찍는다. 

 

2. 시연

화면에 찍힌다. (영상 촬영은 귀찮아서 이만...)