[react] onLoad(), 이미지가 서버로 부터 받아와 졌는지 확인 후 분기 처리

이미지가 성공적으로 로드되면 onLoad 이벤트 핸들러를 호출하여 isImageLoaded 값을 true로 업데이트합니다. 그리고 isImageLoaded 값에 따라 해당 상태를 표시하는 조건부 렌더링을 수행합니다.

따라서, 이 코드에서는 이미지가 로드되면 "Image loaded successfully!"라는 메시지가 나타나고, 그렇지 않은 경우, "Image is still loading..." 메시지가 표시됩니다. 

 

import React, { useState } from 'react';

function Component() {
  const [isImageLoaded, setIsImageLoaded] = useState(false);

  const handleImageLoad = () => {
    setIsImageLoaded(true);
  }

  return (
    <div>
      <img src="https://example.com/myimage.jpg" alt="my image" onLoad={handleImageLoad} />
      {isImageLoaded ? <p>Image loaded successfully!</p> : <p>Image is still loading...</p>}
    </div>
  );
}