3장에서 이미지 지연 로딩 기법을 Intersection Observer API를 사용하여 했지만 이번에는 동일한 기능이지만 Intersection Observer API가 아닌 react-lazyload라는 라이브러리를 이용하여 빠르게 이미지 지연 로딩을 적용해 볼 것임

먼저 react-lazyload 라이브러리를 설치하자

npm install --save react-lazyload
yarn add react-lazyload

사용법은 간단함. 해당 라이브러리를 import하여 지연 로드하고자 하는 컴포넌트를 감싸 주면 됨

import LazyLoad from 'react-lazyload';

function Component() {
	return (
		<div>
			<LazyLoad>
				<img src='이미지 주소' />
			</LazyLoad>
		</div>
	);
}

이렇게 코드를 작성하면 LazyLoad의 자식으로 들어간 요소들은 화면에 표시되기 전까지는 렌더링되지 않다가 스크롤을 통해 화면에 들어오는 순간 로드됨

여기서 중요한 점은 단순히 이미지뿐만 아니라 일반 컴포넌트도 이 안에 넣어 지연 로드할 수 있다는 것임

물론 Intersection Observer API를 이용해도 컴포넌트를 지연 로드할 수 있지만 그걸 직접 구현하는 데는 시간이 많이 필요할 것임

이번에는 이미지 갤러리 서비스에 직접 적용해 보자. 지연 로딩은 이미지를 포함하고 있는 PhotoItem 컴포넌트에 적용하겠음

import LazyLoad from 'react-lazyload';

function PhotoItem({ photo: { urls, alt } }) {
	/* 생략 */

  return (
    <ImageWrap>
      <LazyLoad>
        <Image src={urls.small + '&t=' + new Date().getTime()} alt={alt} onClick={openModal} />
      </LazyLoad>
    </ImageWrap>
  );
}

이렇게 수정한 후, 이미지 갤러리에서 스크롤 해 보면 처음에는 로드되지 않았던 이미지들이 화면에 보일 때 하나씩 로드되는 것을 볼 수 있음

Network 패널을 띄워 함께 보면 Network 패널에서 지연 로드되는 이미지들이 보임

한 가지 아쉬운 점은 이미지가 지연 로드되기 때무에 초기 화면의 리소스를 절약할 수 있는 것은 좋으나, 스크롤을 내려 화면에 이미지가 들어올 때 이미지를 로드하기 때문에 처음에는 이미지가 보이지 않고 시간이 지나야 이미지가 보인다는 점임

이 문제를 해결하기 위해서 이미지가 화면에 들어오는 시점보다 조금 더 미리 이미지를 불러와 화면에 들어온 시점에는 이미지가 준비되어 있도록 해야 함

react-lazyload 라이브러리에서는 그렇게 할 수 있는 옵션을 제공해 줌, 바로 offset이라는 옵션임. 이 옵션에는 얼마나 미리 이미지를 로드할 지 픽셀 값으로 넣어 줌. 예를 들어 offset을 100으로 설정하면 화면에 들어오기 100px 전에 이미지를 로드하는 식임. 여기서 1000px만큼 미리 로드하도록 설정해 보겠음. offset은 LazyLoad의 prop으로 넣어 주면 됨

import LazyLoad from 'react-lazyload';

function PhotoItem({ photo: { urls, alt } }) {
	/* 생략 */

  return (
    <ImageWrap>
      <LazyLoad offset={1000}>
        <Image src={urls.small + '&t=' + new Date().getTime()} alt={alt} onClick={openModal} />
      </LazyLoad>
    </ImageWrap>
  );
}

offset 값을 1000으로 설정 후, 스크롤 해 보면 설정을 하지 않았을 때와 달리 이미지가 미리 준비되어 있음을 확인할 수 있음