게임화면 2 시간초

게임을 실행 하는 화면 ui 디자인 적용 전

순서대로 최상단 숫자 시간초 / 점수 / 고양이아이템

//초기 값은 50
const [time, setTime] = useState<number>(50);

 useEffect(() => {
    const count = setInterval(() => {
      setTime(time - 1);
    }, 1000);

    if (time === 0) {
      clearInterval(count);
      setTimeout(() => {
        divRef.current?.classList.remove("disnone");
        divRef.current?.classList.add("block");
      }, 2000);
    }
    return () => clearInterval(count);
  }, [time]);

1. time의 값이 변경 될때 마다 1초씩 랜더링 되고 값에서 -1 뺀다
2. time의 값이 0 이 되면 clearInterval 실행 되어 멈춤
3. 멈춘 후 2초 뒤에 div 출력(게임 오버 화면 뜸)
   setInterval 반복적으로 동작 실행
   clearInterval setInterval 멈춤
   setInterval
   setInterval,clearInterval