useEffect 안의 ClearInterval()실행 관련 질문

Question

안녕하세요. 먼저 좋은 강의 감사드립니다. 아래에서 useEffect() 안에서 받은 setInterval()의 retrun 값으로 받은 intervalId는 함수 Scope를 벗어나면 없어지는데, 다음에 들어온 상태에서 ... else if(!isError && intervalId) clearInterval(intervalId)... 위 부분이 정상적으로 동작할 수 있나요? 함수 Scope에 상관없이 메모리가 존재하려면 useRef나 다른 방법을 사용하여 intervalid 변수가 살아 있도록 해야하지 않나요?

김시훈 (도도소프트) · Answer

앗 지적 감사합니다! 말씀하신대로 스코프 문제가 있기 때문에 이 경우에는 다음과 같이 useRef를 이용하는게 좋아보입니다. import React, { useState, useEffect } from "react"; import { useRef } from "react"; const Image = ({ imageUrl }) => { const [isError, setIsError] = useState(false); const [hashedUrl, setHashedUrl] = useState(imageUrl); const intervalIdRef = useRef(); useEffect(() => { if (isError && !intervalIdRef.current) { intervalIdRef.current = setInterval( () => setHashedUrl(`${imageUrl}#${Date.now()}`), 1000 ); } else if (!isError && intervalIdRef.current) clearInterval(intervalIdRef.current); else setHashedUrl(imageUrl); return () => clearInterval(intervalIdRef.current); }, [isError, setHashedUrl, imageUrl]); return ( <img alt="" onError={() => setIsError(true)} onLoad={() => setIsError(false)} style={{ display: isError ? "none" : "block" }} src={hashedUrl} /> ); }; export default Image;