Next.JS 14 에서의 이미지 불러오기 기법
next js 14에서는 이미지를 컴포넌트 형식으로 <Image/> 로 불러올 수가 있다.
<Image/>의 필수요소
<Image src="/year.png" alt="year" width={64} height={192} />src 와 alte, width, height가 필수적인 요소로 꼭 들어가야만 한다.
SVG 파일 불러오기
import Image from 'next/image';
import LeftBtnSVG from '/icons/leftBtn.svg';
<Image src={LeftBtnSVG} alt="leftBtn" width={35} />그럼 왜 <Image/> 를 사용해서 이미지를 불러오지?
대표적인 기능으로 3가지가 있는데
- lazy loading
- 이미지 사이즈 최적화
- placeholder 제공
lazy loading
lazy loading에 대해서 간단히 설명을 드리면, 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미한다.
이미지 사이즈 최적화
디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원한다.
placeholder 제공
어떤 웹 사이트에 방문했을 때 이미지가 로드되기 전까지 영역의 높이가 0이었다가 이미지가 로드된 후 이미지만큼 영역이 늘어서 레이아웃이 흔들리는 바람에 다른 링크를 클릭하는 경우가 있는데 이를 CLS(Cumulative Layout Shift)라고 부른다. Next/Image는 레이아웃이 흔들리는 현상을 방지하기 위해 placeholder를 제공한다.
즉 성능 향상과 시각적인 안정성, 빠른 페이지 로딩이 이미지 컴포넌트를 사용함으로써 얻는 이점이다.
