Timer 구현 : pure html + js 와 React.js 로 구현하기

Timer 구현 : pure html + js 와 React.js 로 구현하기

 

순수 html 과 js 를 통해 구현한 코드로 최신 트렌드 언어인 react.js 기반으로 구현한 내용입니다.
이는 서로간의 코드를 비교해 보는 것도 배우는데 많은 도움이 될 수 있습니다.

 

 

 

순수 html + js 파일로 구현하기

 

 

html 내용

<div class="container">
  <div id="result">  
  </div>
</div>
<button onclick="start()">Start</button>

 

js 내용

function start() {
  let duration = 2;
  let endTime = new Date();
  endTime.setMinutes(endTime.getMinutes() + duration);
  let min = duration;
  sec = 0;

  let resultDiv = document.getElementById("result");
  let interval = setInterval(() => {

    sec--;
    if (sec == -1) {
      sec = 59;
      min--;
    }

    resultDiv.innerHTML = min.toLocaleString('en-US', {
      minimumIntegerDigits: 2,
      useGrouping: false
    }) + ":" + sec.toLocaleString('en-US', {
      minimumIntegerDigits: 2,
      useGrouping: false
    });

    if ((min == 0) && (sec == 0)) {
      clearInterval(interval);
    }

  }, 1000);

}

 

 

react.js 로 구현하기

 

 

App.js

 

import React from "react";
import "./style.css";
import Timer from './Timer';
export default function App() {
  return (
    <div>
     <Timer/>
    </div>
  );
}

 

Timer.js

 

import React, { useEffect, useState } from 'react';
export default function Timer() {
  const [time, setTime] = useState();
  useEffect(() => {
    let duration = 2;
    let endTime = new Date();
    endTime.setMinutes(endTime.getMinutes() + duration);
    let min = duration;
    let sec = 0;

    let interval = setInterval(() => {
      sec--;
      if (sec === -1) {
        sec = 59;
        min--;
      }
      let newValue = (
        <>
          <span className="minutes">{formatNumber(min)}</span>
          <span className="divider">:</span>
          <span className="seconds">{formatNumber(sec)}</span>
        </>
      );
      if (min === 0 && sec === 0) {
        clearInterval(interval);
      }
      setTime(newValue);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  let formatNumber = (num) => {
    return num.toLocaleString('en-US', {
      minimumIntegerDigits: 2,
      useGrouping: false,
    });
  };
  return <p className="Timer">{time}</p>;
}

 

 

테스트 확인하기

 

jsfiddle.net/baf3dcvt

Edit fiddle - JSFiddle - Code Playground

 

https://stackblitz.com/edit/react-cagrm7?file=src%2FTimer.js

Count down timer - StackBlitz