[React]시계 만들기

📌인프런 처음 만난 리액트(React)강의를 듣고 따라한 실습 기록입니다.

이전에 만들었던 파일을 사용해 아주 아주 간단한 시계를 만들어 보려한다!

1. 지난 실습과 같이 src에 chapter_04라는 폴더를 만든 후, Clock.jsk 파일을 생성한다.

2. Clock.jsx 파일을 열어 다음과 같이 작성한다.

import React from "react";

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

export default Clock;

Clock이라는 이름의 리액트 함수 컴포넌트를 만든 것이다.
현재 시간을 출력하는 아주 간단한 컴포넌트이다.

3. 만든 컴포넌트를(Clock) 실제 화면에 렌더링하기 위해 index.js파일을 수정한다.

import reportWebVitals from './reportWebVitals';

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

setInterval() 함수를 이용해 1초마다 새롭게 clock컴포넌트를 root div에 렌더링 되도록 만든 코드이다.

🔆 출력화면

개발자 도구를 열어 root div를 보면 화면과 같이 매초 시간이 바뀌며 깜빡이는 것을 볼 수 있다.

💡 코드 작성시 리액트 버전 17과 18의 코드가 다를 수 있으니 유의해야한다!