Home React를 이용한 동적 시계 예제
Post
Cancel

React를 이용한 동적 시계 예제

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

React-clock

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 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();
This post is licensed under CC BY 4.0 by the author.

HTML 요소를 숨기는 3가지 방법 (VanillaJS, Style, JQuery)

Node.js와 React를 설치하는 방법