이미지 로딩

[Next.js] 이미지 로딩 애니메이션 구현하기

이미지를 리스트 형식으로 나열 할때, next.js 의 Image 컴포넌트를 사용하면 이미지를 캐싱 하게됩니다. 문제는 로드와 캐싱되는 시간 동안 사용자는 이미지 대신 비어 있는 공간을 보게됩니다. 해당 상황을 방지하기 위해서 로드되는 동안 로딩이 되고 있다는 애니메이션이 보이는 기능을 구현해보겠습니다. 코드 import Image from "next/image"; import { useRef } from "react"; export default const Poster = () => { const ref = useRef(null); return ( ref.current.remove()} /> ); } 일단 임시로 Poster 라는 컴포넌트를 하나 만들어 주고, 해당 컴포넌트에는 이미지와 로딩 애니메이션..