동아리 홈페이지 프로젝트에서 메인페이지에 동아리원들의 인생네컷을 불러와 보여주는 기능이 있다. 사용자가 메인페이지로 들어온 후 스크롤을 내려야지만 해당 사진들이 보인다. 기존에는 메인페이지에 진입하면 사용자의 행위와 관계없이 무조건 이미지를 요청하는 API가 수행되었다.
그런데 사용자가 바로 게시판으로 넘어간다거나 그저 출석 체크만 하러 홈페이지에 방문했다면? (실제로도 서비스의 주된 용도는 시험 정보(이른바 족보) 공유이긴 했다) 그러면 페이지 로딩 시 굳이 20장의 무거운 이미지를 호출할 필요는 없다고 생각했다.
🤔개념
지연로딩
지연 로딩은 리소스를 논 블로킹(중요하지 않음)으로 식별하여 필요할 때만 로드하는 전략입니다. 이는 중요 렌더링 경로의 길이를 단축하는 방법으로, 페이지 로드 시간을 감소시킬 수 있습니다.
지연 로딩은 애플리케이션의 여러 순간에 발생할 수 있지만, 일반적으로 스크롤 및 내비게이션과 같은 일부 사용자의 상호 작용에서 발생합니다.
위는 MDN 공식문서의 지연 로딩에 관한 설명이다. 지연로딩은 이미지에 국한된 개념은 아니고 JavaScript, 폰트 등에 사용될 수 있다.
Intersection Observer API
Intersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.
위 설명도 MDN 공식문서의 내용이다. '대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우'는 즉 대상 요소가 뷰포트 내부로 들어오는 경우를 의미한다.
해당 API를 사용하여 직접 구현할 수도 있겠지만, 이미 npm에 React에서 사용할 수 있는 관련 패키지를 제공하고 있다. 다운로드 수도 제법 되어 믿고 쓸만할 것 같다.
😎실습
react-intersection-observer와 tanstack-query와의 조합
사실 라이브러리 덕분에 쉽게 이미지 지연로딩을 구현할 수 있었다. 여기서 tanstack-query의 useQuery의 enabled 속성과 조합하여 구현할 수 있었다. 기본적으로 인생네컷 컴포넌트가 렌더링되면서 쿼리가 자동적으로 수행되는데, 해당 속성에 불리언 값인 inView를 지정하면 즉시 쿼리 수행 여부를 조정하는 효과를 줄 수 있다.
결과
지연로딩 적용 결과 아래와 같이 네트워크 전송량이 1.8kB+a -> 1.8kB로 절약된 것을 확인할 수 있었다.
적용 전
적용 후
