React | 타이머 만들기 ( Hooks, setInterval )

Hooks를 사용합니다.

 

1. Timer구현할 컴포넌트 생성

props로 mm은 분(minutes)을, ss는 초(seconds)를 받아옴

import React, { useState, useEffect } from "react";

const Timer = ({ mm, ss }) => {
  const [minutes, setMinutes] = useState(parseInt(mm));
  const [seconds, setSeconds] = useState(parseInt(ss));

  return (
    <div>
      {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
    </div>
  );
};

export default Timer;

 

2. useEffect를 이용해 setInterval 선언

초가 0이면서 분도 0이 되면 카운트다운 종료이므로 clearInterval해줍니다.

parseInt를 안 해주면 뭔가.. 에러가 잘 나네요....

state값이 변경 될 때마다 useEffect가 실행되도록 minutes와 seconds 상태값을 인자값으로 넣어줍니다.

useEffect(() => {
  const countdown = setInterval(() => {
    if (parseInt(seconds) > 0) {
      setSeconds(parseInt(seconds) - 1);
    }
    if (parseInt(seconds) === 0) {
      if (parseInt(minutes) === 0) {
          clearInterval(countdown);
      } else {
        setMinutes(parseInt(minutes) - 1);
        setSeconds(59);
      }
    }
  }, 1000);
  return () => clearInterval(countdown);
}, [minutes, seconds]);

 

 

 

 

+) 참고

setInterval in React Components Using Hooks - Upmostly