ReactJS에서 카운트다운 타이머를 만드는 방법

소개

이전 기사에서 이 기사에는 카운트다운 타이머의 작동 방식과 그 중요성에 대한 자세한 정보가 포함되어 있으며 카운트다운 타이머가 필요한 일부 사용 사례에 대해 설명했습니다. 또한 JavaScriptsetInterval() 및 clearInterval() 메서드가 작동하는 방식에 대해서도 설명했습니다. 나는 그것을 확인하는 것이 좋습니다.

이 기사에서는 ReactJS에서 카운트다운 시간을 구현하는 방법에 대해 설명합니다.

새 반응 프로젝트 만들기

React를 시작하는 것은 간단합니다. 새 React 프로젝트를 생성하려면 터미널에서 다음 명령을 실행합니다.

이 명령은 시작할 수 있도록 몇 가지 예제 파일로 새로운 반응 프로젝트를 생성합니다. 여기에서 count-down-timer는 프로젝트 이름이 됩니다.

npx create-react-app count-down-timer

이 프로젝트가 생성되면 /App.js 파일을 열고 아래 코드를 붙여넣습니다.

import './App.css';
import {useState, useEffect} from 'react';

function App() {
  const countdownDate = new Date('10/18/2022');
  //end date
  const [state, setState] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
//state variable to store days, hours, minutes and seconds

  useEffect(() => {
    const interval = setInterval(() => setNewTime(), 1000);
    //indicating function to rerun every 1000 milliseconds (1 second)

    if(state.seconds < 0){
      clearInterval(interval)
    //Stop the rerun once state.seconds is less than zero
    }
  }, []);

  const setNewTime = () => {
    if (countdownDate) {
      const currentTime = new Date();
      //get current time now in milliseconds
      const distanceToDate = countdownDate - currentTime;
      //get difference dates in milliseconds
      let days = Math.floor(distanceToDate / (1000 * 60 * 60 * 24));
      // get number of days from the difference in dates
      let hours = Math.floor(
        (distanceToDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
      );
      // get number of minutes from the remaining time after removing hours
      let minutes = Math.floor(
        (distanceToDate % (1000 * 60 * 60)) / (1000 * 60),
      );
      let seconds = Math.floor((distanceToDate % (1000 * 60)) / 1000);
      // number of hours from the remaining time after removing seconds

      const numbersToAddZeroTo = [1, 2, 3, 4, 5, 6, 7, 8, 9];

      days = `${days}`;
      if (numbersToAddZeroTo.includes(hours)) {
        hours = `0${hours}`;
      } else if (numbersToAddZeroTo.includes(minutes)) {
        minutes = `0${minutes}`;
      } else if (numbersToAddZeroTo.includes(seconds)) {
        seconds = `0${seconds}`;
      }
      // a logic to add 0 in front of numbers such that 1 will be 01, 2 will be 02, and so on.

      setState({ days, hours, minutes, seconds });
      //Updating the state variable.
    }
  };

  return (
    <div className="container">
        {
            state.seconds < 0 ?
            <div className='counter-timer'> Time up </div>
            :
            <div className='counter-container'>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.days || '00'}</div>
              <span >Days</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.hours || '00'}</div>
              <span >Hours</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.minutes || '00'}</div>
              <span >Minutes</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.seconds || '00'}</div>
              <span >Seconds</span>
            </div>
          </div>
        }

    </div>

  );
}

export default App;

/App.css 파일을 열고 아래 코드를 붙여넣습니다.

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
  div{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #time-up{
    display: none;
  }
  .container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  height: 100vh;
  background-color: #1A1A40;
  color: white;
  }
  .counter-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  }
  .counter-timer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: fl; */
  }
  .counter-timer{
    font-size: 60px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
  span{
        color: #c7c7c7;
        font-size: 18px;
  }

  @media screen and (max-width : 900px) {
    .counter-timer {
      font-size: 30px;
      font-weight: 600;
    }
    span {
        font-size: 12px;
    }

  }

그게 전부입니다. 정말 멋진 카운트다운 타이머가 있습니다.

참고: 2022년 10월 18일 또는 그 이후에 이 기사를 읽고 있는 경우 카운트다운 타이머가 표시됩니다. 그 이유를 알아야 합니다. "2022년 10월 18일"이 종료 날짜이기 때문입니다. 종료일을 오늘 이후로 자유롭게 변경하고 마법을 확인하세요.

읽어주셔서 감사합니다 🎉🎉🎉

질문이 있으시면 댓글 섹션에 남겨주세요.

더 흥미로운 콘텐츠를 위해 귀하와 연결하고 싶습니다.

행복한 코딩...