무한슬라이드를 구현한 것까진 좋은데..
API을 아쉽게도 많이 사용할 일이 없었다..
그래서 데이터를 가져올때 무한스크롤의 장점을 살리지 못한 거 같아 아쉬웠다.
무한 스크롤을 css정도만 적용했기 때문에 성능을 위해서 이미지를 동적으로 로딩해오면 되겠다!라고 생각했고 구현해보았다.
문제점: 한번에 모든 연주자 사진이 가져와진다 ☄️
위 사진처럼 한 번에 저렇게 많은 사진이 불러와졌다.
(초기페이지에서)
그래서 "react-intersection-observer" 라이브러리로 구현된 무한스크롤에 해당 InView에 나타나면 img를 불러오도록 하였다.
//imgDummy.js
import image1 from "./img/1.jpeg";
import image2 from "./img/2.jpeg";
import image3 from "./img/3.jpeg";
import image4 from "./img/4.jpeg";
import image5 from "./img/5.jpeg";
import image6 from "./img/6.jpeg";
import image7 from "./img/7.jpeg";
import image8 from "./img/8.jpeg";
import image9 from "./img/9.jpeg";
import image10 from "./img/10.jpeg";
import image11 from "./img/11.jpeg";
import image12 from "./img/12.jpeg";
import image13 from "./img/13.jpeg";
import image14 from "./img/14.jpeg";
import image15 from "./img/15.jpeg";
import image16 from "./img/16.jpeg";
import image17 from "./img/17.jpeg";
import image18 from "./img/18.jpeg";
import image19 from "./img/19.jpeg";
import image20 from "./img/20.jpeg";
import image21 from "./img/21.jpeg";
import image22 from "./img/22.jpeg";
import image23 from "./img/23.jpeg";
import image24 from "./img/24.jpeg";
export const imgArrDummy = [
image1,
image2,
image3,
image4,
image5,
image6,
image7,
image8,
image9,
image10,
image11,
image12,
image13,
image14,
image15,
image16,
image17,
image18,
image19,
image20,
image21,
image22,
image23,
image24,
];
이렇게 이미지를 import하는 파일을 따로 만들어주고
export default function ArtistView() {
const { ref, inView, entry } = useInView({ threshold: 0.2 });
const [imgArr, setImgArr] = useState([]);
let isInitialGetImg = true;
// 해당 ref가 적용된 태그의 정보를 가져오는데
// 만약 해당 컴포넌트가 viewpoint에 보인다면 inView가 true
useEffect(() => {
const getImgData = async () => {
const { imgArrDummy } = await import("./imgDummy.js");
setImgArr(imgArrDummy);
};
inView && isInitialGetImg && getImgData();
isInitialGetImg = false;
}, [inView]);
return ...
}
최초에 inView가 처음 등장할 때
getImgData를 가져오도록 하였다.
결과를 살펴보자
해결결과 🎯
리펙토링 전은 위 사진과 같다.
위 speed index는 화면에 컴포넌트를 그리기 까지 걸린 시간이라고한다.
리펙 토링 후엔 미세하지만 더 나은 페이지로 개선될 수 있었다.
위와 동일한 방법으로 Poster와 Pamplet도 동적으로 가져오도록 수정하였다.
load=lazy(html) 🧐
브라우저에서 리소스를 필요할 때 로드하는 전략이라고 한다.
즉, 뷰포트 바깥에 있다면 이미지는 로딩되지 않고 뷰포트 안에 있다면 이미지는 로딩이 됩니다.
이러한 속성을 사용할지 고민을 해보았다.
Swiper에 담겨있는 이미지들이 넘길때마다 약간의 텀을 두고 이미지를 가져오는 방식이다.
이는 분명 초기로딩속도에는 긍정적인 영향을 주겠지만 슬라이드를 할때마다 이미지를 가져오는 모습이 썩 마음에 들지 않았다.
그래서 그냥 해당 뷰포트로 들어오면 한번에 23분의 아티스트 데이터를 가져오는 식으로 정하였다.
또, 2번째 위험성이 있었는데 그건 바로 브라우저마다 지원되는 부분이 있고 지원되지 않는 부분이 있다고 한다.
특히 애플의 사파리는 해당 속성을 지원하지 않아서 그냥 안정적으로 Load=lazy 속성은 사용하지 않고 해당 뷰포트에 들어오면 useEffect와 useState를 통해 해당 이미지 데이터를 한번에 받아오는 방식을 선택했다.
