6-4강 useEffect 배열 입력값에 따른 로또 중복공 발생 질문

안녕하세요 제로초님 항상 좋은 강의 감사드립니다 :)

유튜브로 강의를 수강하다가, 인프런/유튜브 댓글에 같은 질문이 없어 질문을 남깁니다. (사실 하나 있긴 했는데 이해가 잘 안되더군요 ㅜㅜ)

강의에서 아래와 같이 useEffect의 배열에 winBalls.length===0을 넣으면 첫번째 공과 두번째 공이 중복으로 나오고, timeouts.current로 넣으면 의도한대로 제대로 공이 중복되지 않게 나오는 것을 확인할 수 있었습니다.

  useEffect(()=>{
    for(let i=0;i<6;i++){
      timeouts.current[i]=setTimeout(()=>{
        setWinBalls((prevState)=>[...prevState, winNumbers[i]]);
      }, (i+1)*1000);
    }
    timeouts.current[6]=setTimeout(()=>{
      setBonus(winNumbers[6]);
      setRedo(true);
    }, 7000);
    return ()=>{
      timeouts.current.forEach((v)=>{
        clearTimeout(v);
      })
    }
  },[winBalls.length===0]);

class형에서는 winBalls.length===0으로 해도 문제없지만 hooks에서는 문제가 발생한 이유를 저는 componentDidMount와 componentDidUpdate 역할을 useEffect가 한번에 해주기 때문에 중복발생하는 것으로 이해했습니다.

(useEffect에서 winBalls.length===0이라는 조건문에 mount,update할 때 각각 부합해서 중복발생하는 것으로 이해하였습니다.)

1. 그런데, timeouts.current을 배열에 넣을 때는 처음 mount될 때나 update될 때나 똑같이 빈 배열일텐데 왜 같은 공이 중복발생하지 않고 의도대로 제대로 작동하는지 궁금합니다.

2. winBalls.length===0과 같이 조건문을 useEffect 배열에 넣어도 되는건가요? 만약 가능하다면, winBalls.length===0을 배열에 넣을 경우, 위 중복 공 발생버그를 해결할 수 있는 방안도 있을까요?

항상 감사드립니다!