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

앗 지적 감사합니다!

말씀하신대로 스코프 문제가 있기 때문에 이 경우에는 다음과 같이 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;

인프런 커뮤니티 질문&답변