setInterval 반응 완료 구성 요소를 무제한으로 다시 렌더링합니다. 왜 이런 일이 발생하며 어떻게 해결합니까?

Question

이것은 내 반응 코드입니다. 구성요소를 무한히 다시 렌더링합니다.

const [seconds, setSeconds] = useState(60)
useEffect(() => {
    const interval = setInterval(() => {
        setSeconds(seconds => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
}, []);

console.log("object");

Answer 1

이는 구성 요소가 언로드될 때만 간격을 지우기 때문에 발생하며, 이는 사용자가 페이지에서 다른 곳으로 이동할 때만 발생합니다.

이것이 당신에게 필요한 것이 아닐까요? 간격이 0에 도달하면 이를 지웁니다. 하지만 이를 위해서는 참조를 사용해야 합니다. setInterval의 상태는 초기 값만 갖기 때문에 사용할 수 없습니다.

으아아아