리액트에서 타이머함수 활용하기

타이머함수가 알고 싶다면

리액트를 공부하면서 타이머를 만드려고 자바스크립트 타이머함수를 알아보고 적용을 해보았습니다
처음엔 "1초마다 시간을 1초씩 줄여가면되니 setInterval과 state를 쓰면되겠구나"했지만 setInterval을 onload형식으로 사용하는게아닌 시작버튼이 존재하면 state가 변경되면서 재렌더링이될때 interval함수가 끊겨 버리는 현상이 나타나 버리더군요..

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


function App() {
  
  const [count,setCount]=useState(10);
  const alt = num =>{
    if(count>0){
    setCount(count-1);
    }
  }

  const timer=()=>{setInterval(
    alt
  ,1000)};

  const stop=()=>{clearInterval(timer)};


  return (
   <>
   <p>{count}</p>
   <button onClick={timer}>시작</button>
  <button onClick={stop}>멈추기</button>
   </>
  );
}

export default App;

이렇게 하면

1이 줄어들고 재렌더링이 되면서 멈춰버립니다 그래서 어떻게 하지 하고 고민하다가 친구의 조언으로 생각해낸
"재렌더링이 될때 onload형식으로 setTimeout하면 되겠네??"

해서 만든코드

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


function App() {
  
  const [count,setCount]=useState(10);
  var stop=false;
  const alt = num =>{
    if(count>0&&!stop){
    setCount(count-1);
    }
  }

  const start=()=>{setTimeout(
   ()=>{ 
    stop=false;
    alt();
   }
  ,1000)};

  const stopper=()=>{
    stop=true;
  };

  const timer = ()=>{
    setTimeout(alt,1000);
  };

  if(count<10)
  {
    timer();
  }

  return (
   <>
   <p>{count}</p>
   <button onClick={start}>시작</button>
  <button onClick={stopper}>멈추기</button>
   </>
  );
}

export default App;

결과

생각보다 이리저리 추가할게 많아졌지만 state가 변경될때 재렌더링된다는 사실 잘 기억하고 잘 활용하도록 해야겠습니다