React와 TypeScript를 이용해서 카운트다운을 해봅시다 !!

안녕하세요 ! 

오늘은 리액트와 타입스크립트를 활용해서 카운트 다운을 구현해보겠습니다 !!! 

어렵지 않습니다 !! 잘 따라와주세요 !! ㅎㅎ

 

바로 코드를 봐봅시다 ! 

CountDown.tsx

const Countdown = (targetDate: Date): Number[] => {
  const countDownDate = new Date(targetDate).getTime()

  const [countDown, setCountDown] = useState(
    countDownDate - new Date().getTime()
  )

  useEffect(() => {
    setInterval(() => {
      setCountDown(countDownDate - new Date().getTime())
    }, 1000)
  }, [countDownDate])

  return getReturnValues(countDown)
}

먼저 Countdown이라는 함수를 만들었습니다 ! 

그리고 처음에 useState를 사용해서 countDown에는 원하는 날짜를 계산하기 위해서

「원하는 날짜 - 오늘날짜」를 해서 날짜 계산을 해놨습니다 ! 

 

그리고 나서 useEffect를 이용해서 실행을 시키죠 ! 

useEffect안에서가 중요합니다 ! 

 

setInterval()이란?? 

 

setInterval() 메서드는 지정된 시간 간격마다 지정된 기능을 반복하는 데 사용됩니다. 지정된 간격으로 표현식을 평가하거나 함수를 호출합니다. 이 메서드는 창이 닫히거나 clearInterval() 메서드가 호출 될 때까지 함수 호출을 계속합니다 . 이 메서드는 생성된 타이머를 식별하는 숫자 값이나 또는 0이 아닌 숫자를 반환합니다.

또한 setTimeout() 메서드 와 달리 setInterval() 메서드는 함수를 여러 번 호출합니다. 이 메서드는 창 window. 구문을 생략할 수 있습니다. 

 

즉 !! 저 위에처럼 사용한다면 1초마다 반복적으로 부를 수 있음으로 카운트 다운을 쉽게 할 수 있죠 ! countdown이라는 변수가 계속 바뀌니 !! 

 

먼저 setInterval()을 이용해서 지정된 시간마다 안에 있는 기능을 반복하게 해줍니다 ! 

 

그럼 이제 계산을 하는 곳으로 가봅시다 ! 

CountDown.tsx

const getReturnValues = (countDown: number) => {
  // calculate time left
  const days = Math.floor(countDown / (1000 * 60 * 60 * 24))
  const hours = Math.floor(
    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  )
  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60))
  const seconds = Math.floor((countDown % (1000 * 60)) / 1000)

  return [days, hours, minutes, seconds]
}

 

계산을 해서 일, 시, 분, 초를 찾습니다!! 

 

그럼 불러오는곳으로 가볼까요?? 

 

CountComponent.tsx

const targetDate = new Date('2022-11-02 15:14:14')
const [days, hours, minutes, seconds] = Countdown(targetDate)

<ShowCountDown
  days={Number(days)}
  hours={Number(hours)}
  minutes={Number(minutes)}
  seconds={Number(seconds)}
/>

이런식으로 불러왔습니다 !!!! 

위에처럼 잘 나옵니다 !!! 

( 영상으로 찍고싶었는데 ㅜㅜ 정말 움직이니까 믿어주세요 ^^ 나중에 기회되면 영상으로 올리겠습니다 ! ) 

 

 

오늘은 리액트에서 카운트 다운하는 방법에 대해서 알아봤습니다 !!! 

카운트 다운이 필요한곳에서 꼭 한번씩 사용해봅시다 ^^