-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
useEffect 안의 ClearInterval()실행 관련 질문
22.09.25 13:53 작성 조회수 286
0
안녕하세요. 먼저 좋은 강의 감사드립니다.
아래에서 useEffect() 안에서 받은 setInterval()의 retrun 값으로 받은 intervalId는 함수 Scope를 벗어나면 없어지는데, 다음에 들어온 상태에서
... else if(!isError && intervalId) clearInterval(intervalId)...
위 부분이 정상적으로 동작할 수 있나요?
함수 Scope에 상관없이 메모리가 존재하려면 useRef나 다른 방법을 사용하여 intervalid 변수가 살아 있도록 해야하지 않나요?
답변을 작성해보세요.
0
김시훈
지식공유자2022.09.26
앗 지적 감사합니다!
말씀하신대로 스코프 문제가 있기 때문에 이 경우에는 다음과 같이 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;
답변 1