본문으로 바로가기

React - Current Time

category Frontend/React 2020. 2. 4. 23:27
반응형

 

import React from "react";

const Clock = () => {
  const [clock, setClock] = React.useState("");

  const getTime = () => {
    const date = new Date();
    const hours = date.getHours();
    let minutes = date.getMinutes();
    let sec = date.getSeconds();
    let currentTime = `${hours < 10 ? `0${hours}` : hours}:${
      minutes < 10 ? `0${minutes}` : minutes
    }:${sec < 10 ? `0${sec}` : sec}`;

    setClock(currentTime);
  };

  React.useEffect(() => {
    setInterval(getTime, 1000);
  });

  return (
    <div className="clock">
      <h1 className="clock__time">{clock}</h1>
    </div>
  );
};

export default Clock;​
반응형

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

[리액트 및 리듀서 기본 설정] React & Reducer Default Settings  (0) 2020.02.23
Github Pages 배포  (0) 2020.02.09
Component Life Cycle  (0) 2019.12.31