리액트 인피니티 스크롤 적용하기(+ 작동법 설명 포함)

만약 10000개의 데이터 정보를 map 으로 화면에 뿌리게 되면 어떻게 될까?

이정도는 클라이언트에서 잘 버틸  수 있을지도 모른다... 그럼 10만개는?

 

많은 데이터를 한꺼번에 뿌리는 방법이 아니라,

원하는 엔드 포인트에 다다랐을 때마다 갱신하는 방법을 사용하면 부하를 줄일 수 있기 때문에

인피니티 스크롤을 사용하게 된다.

 

인피니티 스크롤 데모

---

작동하는 것과 코드는 아래 데모에서 확인할 수 있다.

 

 

인피니티 스크롤 설명

---

인피니티 스크롤의 동작 방식은 다음과 같다.

 

1. 상위 root element 의 가시성을 확인하여

2. 가시성의 변화가 생겼을 때

3. loader.current 와 root 가 교차하였을 때 스크롤 이벤트 발생(데이터 갱신)

 

코드를 보면 이런 느낌이다.

// IntersectionObserver(스크롤 비동기 감지)
  useEffect(() => {
    const option = {
      root: document.querySelector("infinite-scroll"), // 요소의 가시성을 확인하는 상위(루트) element
      rootMargin: "0px", // 루트의 범위
      threshold: 1.0, // 어느정도 노출되었을 때 콜백 호출할 지 1.0 = 100% 가시성 즉, 다 보여졌을때
    };
    // new IntersectionObserver(callback, option)
    // callback 은 가시성의 변화가 생겼을 때
    // option 은 콜백이 호출되는 상황
    const observer = new IntersectionObserver(handleObserver, option);
    
    // map 마지막 부분의 loader.current 와 root 가 교차할 때 스크롤 이벤트 발생
    if (loader.current) observer.observe(loader.current);
    return () => observer.disconnect();
  }, [handleObserver]);

 

root 에 해당하는 element 와 loader에 해당하는 element 설정이 제일 중요하다.

option 의 경우 어떨 때 옵저버를 작동시킬지 개발자가 조절할 수 있기 때문에 원하는 대로 커스텀하면 된다.

 

 

참고 블로그

---

https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC