실전 프로젝트 - 5

setInterval

// WorkOut.js

useEffect(() => {
  // if 문 안에 있는 interval 들을 밖에서 호출해서 연결시켜줌.
  let interval = null;

  if (!timeStop) {
    interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);
  } else {
    clearInterval(interval);
  }
  return () => {
    clearInterval(interval);
  };
}, [timeStop]);

운동을 진행할때 사용하는 스탑워치를 구현해보았다.
1초마다 setInterval을 이용해서 직전 time + 1 을 해주었다.
이 스탑워치를 언제 멈춰줄지 즉, 언제 clearInterval 해줄지가 포인트였다.
일시정지를 눌렀을때는 물론이고, 혹시라도 스탑워치를 켠 채로 페이지를 이탈한다면 시간 카운팅을 어떻게 해줄지가 고민이었다.
일반적인 스탑워치는 페이지를 이탈해도 계속 시간이 가야하지만 workout 페이지에서는 딱히 해당 기능을 구현할 필요성을 못느꼈다. 운동 중에는 다른 페이지의 기능을 사용할 이유가 없으므로...
또한, 페이지를 이탈했을때 그럼 언제 타이머를 꺼줄지, 메모리 사용은 어떻게 통제해줄지 등 고려할 사항이 많았다.
오버엔지니어링이라 생각되어 useEffect를 이용해 return에 clearInterval을 넣어주었다.

progress bar

• npm i @ramonak/react-progress-bar

또 하나의 setInterval을 사용한 부분이 있었는데, 휴식의 시간을 저절로 흐르게하여 휴식 게이지가 채워지는 부분이었다. 여기서는 clearInterval 해주는 방식이 하나 더 추가되는데 휴식시간과 setInterval 시간이 같아지면 중지해줘야했다. 그래야 자동으로 다음 세트로 인덱싱이 넘어갈수 있기 때문.