이미지 렌더링 최적화1 [react] Intersection Observer API 스크롤에 도달했을 때 이미지 로딩하기 lazy load 이번 프로젝트는 유튜브 api를 사용하여 추천 영상을 등록하고, 검색하는 프로젝트를 진행하였다. 한 페이지에 이미지가 많이 배치될 예정이라 이미지 렌더링을 한 번에 하지 않는 방법을 찾던 중 IntersectionObserver 를 알게 되었다. 먼저 useState와 useRef를 추가한다. 렌더링 될 이미지가 여러 개이기 때문에 배열로 useRef에 담는다. const [visibleIndices, setVisibleIndices] = useState([]); const imageRefs = useRef([]); useEffect로 data가 변경될 때마다 실행시킨다. data : supabase에서 검색해 온 데이터 IntersectionObserver(callback[, options]) : 대상.. 2024. 2. 27. 이전 1 다음
