[React] D-Day 계산하기 (typescript)

react + typescript로 D-Day 계산기가 필요해 간단하게 useEffect와 useState를 통해서 계산기 컴포넌트를 만들어 보도록 하겠다.

 

시간의 차이를 계산하기 위해 자바스크립트 함수를 사용하고, 이것을 통해서 계산된 날짜 차이를 매 1초마다 화면에 갱신해 주는 절차를 진행해 주면 된다.

1. 날짜 값 가져오기

우선 src 폴더 아래에 Day폴더를 만들어 주고 Day.tsx 파일을 하나 생성해 준다. 그런 다음 아래의 코드를 입력하여 지금 시간부터 2024년 12월 25일 10시까지를 계산해 보도록 하겠다.

import { useEffect, useState } from "react";

const Day = () => {

    const countdownday = new Date('2024-12-25 10:00:00').getTime() //2024년 12월 25일 10시 설정

    const [calculatedate,setCalculatedate] = useState(countdownday - new Date().getTime());  //가져온 시간 - 현재 시간

    useEffect(() => {
        setInterval(() => {
            setTime(countdownday - new Date().getTime()); // 1초마다 갱신
        },1000);
    })
    
    return (
        <div>
            {Calculatedate}
        </div>
    );
};

export default Day;

 

그리고 App.tsx로 돌아가  Day.tsx를 불러와 컴포넌트를 사용하면...

import './App.css'
import Day from './Day/Day.tsx'

  return (
    <>
      <Day/>
    </>
  )
}


export default App

 

아래의 사진처럼 알 수 없는 숫자가 나온다. 그 이유는 뒤에서 설명할 getTime() 함수 때문이다.

2. 시간 계산하기(getTime() 함수 사용)

자바스크립트의 getTime() 함수를 통해서 날짜 차이를 계산하면 위에처럼 날짜 형태로 값이 나오지 않는다.

 

getTime()은 1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자를 구한다.

 

그래서 위에처럼 우리가 원하지 않는 숫자만 나오게 된다. 해당 날짜의 차이를 구하고 난 다음 적절한 계산식을 사용해서 일, 시간, 분, 초를 표현해 줘야 한다.

 

import { useEffect, useState } from "react";

const Day = () => {

    const countdownday = new Date('2024-12-25 10:00:00').getTime()

    const [Calculatedate, setCalculatedate] = useState(countdownday - new Date().getTime());

    useEffect(() => {
        setInterval(()=>{
            setCalculatedate(countdownday - new Date().getTime())
        },1000);
    })

    const day = Math.floor((Calculatedate / (1000 * 60 * 60 * 24)));
    const hours = Math.floor((Calculatedate / (1000*60*60) % 24));
    const min = Math.floor((Calculatedate / (1000*60) % 60));
    const sec = Math.floor((Calculatedate /1000 % 60));

    return (
        <div>
            {day} : {hours} : {min} : {sec}
        </div>
    );
};

export default Day;

 

그러면 아래처럼 원하는 형태가 나오게 된다.