리액트와 Next.js에서 사용하는 무한 스크롤 방법엔 두가지 기법이있다.

• Intersection Observer API
• react window

그중 Intersection Observer API를 사용하는게 지금 방법이다.

설치방법

npm install react-intersection-observer --save

사용법

우선 위 설치방법으로 설치를 한 후

객체 하나를 ref로 지정한 후 해당 객체가 화면에 보이면 어떠한 이벤트를 실행하게하는 이벤트 처리방식이다.

import React, { uesEffect } from 'react';
import { useInView } from 'react-intersection-observer';

const Component = () => {
  const { ref, inView, entry } = useInView();

  useEffect(() => {
    실행함수();
  }, [inView]);
  
  return (
    <div ref={ref}>나를 봤다면, 이벤트 실행!!</div>
  );
};