[javascript] Next.js에서의 무한 스크롤 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

Next.js는 React를 기반으로 한 SSR(Server Side Rendering) 프레임워크로, 무한 스크롤을 구현하기 위해서는 몇 가지 방법을 사용할 수 있습니다.

Intersection Observer 사용: Intersection Observer는 뷰포트에 들어오는 요소를 감시하고 이벤트를 발생시키는 브라우저 API입니다. 이를 사용하여 스크롤이 일어날 때 추가 데이터를 로드할 수 있습니다. react-intersection-observer와 같은 라이브러리를 사용하여 간편하게 구현할 수 있습니다.

예시:

import { useInView } from 'react-intersection-observer';

const MyComponent = () => {
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      // 추가 데이터를 로드하는 로직
    }
  }, [inView]);

  return (
    <>
      {/* 표시될 내용 */}
      <div ref={ref} />
    </>
  );
};

스크롤 이벤트 리스너 사용: useEffect를 사용하여 스크롤 이벤트를 감지하고, 스크롤 위치에 따라 추가 데이터를 로드합니다.

예시:

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const handleScroll = () => {
      // 스크롤 위치에 따라 추가 데이터를 로드하는 로직
      const scrollPosition = window.innerHeight + window.pageYOffset;
      const documentHeight = document.documentElement.scrollHeight;
      
      if (scrollPosition === documentHeight) {
        // 추가 데이터를 로드하는 로직
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <>
      {/* 표시될 내용 */}
    </>
  );
};

위의 방법들은 Next.js에서 무한 스크롤을 구현하는 간단한 예시입니다. 실제로는 데이터를 가져오고 적절히 처리하는 등의 추가 작업이 필요할 수 있습니다.