[소플의 처음 만난 리액트] 4장 실습문제

Tick.jsx

import React from "react";
// 실습: 시계 만들기

function Tick(){
  return(
    <div>
      <h1>안녕, 리액트!</h1>
      <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
    </div>
  )
}

export default Tick;

index.js

import reportWebVitals from './reportWebVitals';

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

핵심 키워드

• setInterval() 함수를 이용해서 매 초마다 clock 컴포넌트를 root 노드에 렌더링했다.

• 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미한다.

• React에서는 Virtual DOM을 실제 DOM에 필요한 부분만 적절하게 반영해서 불필요한 수정이 일어나지 않도록 해준다.

결론!