[React] Intersection Observer 로 무한 스크롤(무한로딩) 구현하기

Intersection Observer? 

scroll 이벤트 :

- 스크롤 시 짧은 시간 내에 수 백, 수 천의 이벤트가 동기적으로 실행될 수 있어, 성능에 악영향을 줄 수 있습니다.

 

Intersection Observer API :

- 루트 요소와 타겟 요소의 교차점을 관찰합니다.  

- 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있습니다.

- scroll 이벤트와 다르게 교차 시 비동기적으로 실행됩니다. 

- 성능상 유리합니다.

 

교차점 정보는 다음과 같은 여러 가지 이유로 필요합니다.

• 페이지가 스크롤될 때 이미지나 다른 콘텐츠가 레이지 로딩되는 현상.
• 사용자가 페이지를 넘길 필요가 없도록 스크롤할 때 점점 더 많은 콘텐츠가 로드되고 렌더링되는 "무한 스크롤" 웹사이트를 구현합니다.
• 광고 수익을 계산하기 위해 광고의 가시성을 보고합니다.
• 사용자에게 결과가 표시되는지 여부에 따라 작업이나 애니메이션 프로세스를 수행할지 여부를 결정합니다.

 

 

Intersection Observer 실제로 블로그 프로젝트에 적용해보기

블로그 프로젝트에서 팔로우 목록을 불러올때 무한 스크롤을 구현해보겠습니다.

 

1) IntersectionObserver 객체를 생성

const observer = useRef<IntersectionObserver | null>(null);

 

IntersectionObserver 객체를 생성해줍니다.

 

2) useCallback 을 통해 데이터가 존재할때, page를 하나 증가합니다. 

const lastFollowerElementRef = useCallback(node => {

if (isLoading) return;

if (observer.current) observer.current.disconnect();

 

observer.current = new IntersectionObserver(entries => {

if (entries[0].isIntersecting && hasMore) {

setPage(prevPage => prevPage + 1);

}

});

 

if (node) observer.current.observe(node);

}, [isLoading, hasMore]);

 

3) page가 변할때마다 fetchFollowers() 를 호출하여 서버에서 데이터를 가져옵니다.

useEffect(() => {

fetchFollowers();

}, [page, navigate]);

 

 

이때, fetchFollowers 함수는 다음과 같습니다.

const fetchFollowers = async () => {

setIsLoading(true);

try {

const email = isOthers ? sessionStorage.getItem('other_email') : sessionStorage.getItem('email');

if (email) {

const fetchedFollowers = await getFollow(email, page);

setFollowers(prevFollowers => [...prevFollowers, ...fetchedFollowers.data.followingsList]);

 

if (fetchedFollowers.data.followingsList.length < 10) {

setHasMore(false);

}

}

} catch (error) {

console.error('Failed to load followers:', error);

} finally {

setIsLoading(false);

}

};