[React] 타이머 기능 구현하기 - setInterval

[공식문서]

 https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often

Hook 자주 묻는 질문 – React

 

 

 

setInterval

: 매 시간 동안 브라우저와 통신하는 함수

=> 일정한 간격으로 setInterval 내의 코드를 반복할 수 있다.

=> 매 초마다 시간이 바뀌는 화면을 만들어 낼 수 있음!

setInterval(() => {
	// 실행할 코드
}, 시간 간격)

 

 

 

마운트 될 때 타이머를 바로 실행 시키도록 작성해보았다.

count가 0이 되었을 때 실행할 코드를 추가하면 좋을 것 같다.

import React, { useEffect, useState } from "react";
import styles from '../Auction/Timer.module.css';


export default function Timer() {
  // 시간을 담을 변수
  const [count, setCount] = useState(30);

  useEffect(() => {
    // 설정된 시간 간격마다 setInterval 콜백이 실행된다. 
    const id = setInterval(() => {
      // 타이머 숫자가 하나씩 줄어들도록
      setCount((count) => count - 1);
    }, 1000);
    
    // 0이 되면 카운트가 멈춤
    if(count === 0) {
        clearInterval(id);
    }
    return () => clearInterval(id);
    // 카운트 변수가 바뀔때마다 useEffecct 실행
  }, [count]);

  return <div className={styles.timer}><span className={styles.count}>{count}</span></div>;
}

실행결과

 

 

 

소프트콘 근본,,, 롯리..ㅎ

,,,다음 플젝도 깔깔대면서 하고 싶은 사람들의 모임,,,🙆‍♀️