[JavaScript/React]
React를 이용해 동적 실시간 시계 만들기

2020. 8. 27. 00:35


리액트를 이용해 간단한 현재 시간을 표시하는 동적인 시계의 코드이다.

React 실시간 시계 App에서 현재 시간을 표시하는 모습

// your_app/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 현재 시간을 DOM에 뿌려줄 tick함수
function tick()
{
  const element = (
  <div>
    <h2>It is {new Date().toLocaleTimeString()}</h2>
  </div>
  );

  ReactDOM.render(element, document.getElementById("root"));
}

// 1초마다 tick함수를 갱신하기 위한 함수
setInterval(tick, 1000)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

'JavaScript > React' 카테고리의 다른 글

Windows PC에 React를 설치하는 방법  (0) 2020.08.29
React를 이용해 동적 실시간 시계 만들기  (0) 2020.08.27