react-intersection-observer를 활용한 이미지 최적화

https://www.npmjs.com/package/react-intersection-observer

 

웹 성능 최적화에서 중요한 요소 중 하나가 바로 이미지 로딩 방식이다. 특히 사용자가 스크롤을 내리기 전에 보이지 않는 이미지를 미리 로딩하지 않도록 하는 최적화 방법이 필요하다. 이를 위해, react-intersection-observer를 활용하여 지연 로딩을 적용했고, 이로써 불필요한 네트워크 요청을 줄이고 성능을 향상시킬 수 있었다.

react-intersection-observer란?

Intersection observer API를 react에서 쉽게 사용할 수 있도록 만든 라이브러리이다. 특정 요소가 뷰포트에 들어왔는지를 감지할 수 있고, 이를 활용하여 이미지나 콘텐츠가 사용자에게 보일 때 로드하도록 최적화할 수 있다.

나는 아래와 같이 이미지 디자인 컴포넌트를 만들었다. 여기서 핵심은 inView일 경우에만 src에 링크를 할당하는 것이다.

*HTML에서 <img> 태그의 src 속성에 이미지 URL이 설정되면 브라우저는 해당 URL로 네트워크 요청을 보내 이미지를 가져온다. AWS의 S3와 같은 곳으로 요청이 가는 것이다.

import {useInView} from 'react-intersection-observer'

function LazyImage({src, alt, size}: LazyImageProps) {
    const {ref, inView} = useInView({triggerOnce: true, threshold: 0})
    const isOriginal = size === 'original'

    return (
        <div ref={ref} className={cx({'img-container': true, [`${size}`]: true, original: isOriginal})}>
            <img src={inView ? src : undefined} alt={alt || 'img'} />
        </div>
    )
}

• useInView 훅을 사용하여 특정 요소가 화면에 나타났는지를 감지한다.
• triggerOnce: true 옵션을 추가하여 한 번 화면에 나타나면 이후 감지를 중단하도록 설정한다.
• threshold: 값을 지정하여 0% 이상 화면에 노출될 경우 이미지를 로드하도록 설정한다.

이로써, react-intersection-observer를 활용한 이미지 지연 로딩을 통해 성능 최적화를 해봤다.