実戦計画-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を停止するかです.
一時停止ボタンを押すだけでなく、ストップウォッチを開いて出て行った場合、どのように計時すればいいのでしょうか?
一般的なストップウォッチはページから離れても持続時間がかかりますが、「トレーニング」ページではその機能を実施する必要は感じられません.運動中に他のページの機能を使う理由がないので...
また、ページから飛び出した場合、タイマーをいつ閉じるか、メモリの使用をどのように制御するかなどの問題が考えられます.
過剰工事とされ、USEffectを利用してreturnにclearIntervalを加えた.

progress bar

npm i @ramonak/react-progress-bar

setIntervalを使用した部分もあり、休憩時間を自動的に流れ、休憩バーを満たすことができます.ここでまたclearIntervalの方法を追加し、休憩時間がsetInterval時間と同じであれば停止すべきです.このようにしてこそ、インデックスは次のグループに自動的に移動します.