📚 Reference

• GitHub 1

📜 Chapter

useInfiniteQuery

‣

react-intersection-observer

• react-intersection-observer
• 브라우저의 Intersection Observer API를 React에서 아주 쉽게 사용할 수 있도록 만든 라이브러리이다.
• "특정 컴포넌트(요소)가 화면(뷰포트)에 들어왔는지 나갔는지"를 감지해주는 도구이다.
• 무한 스크롤을 구현할 때 '가장 아래에 있는 요소'가 화면에 보이는 순간을 포착하기 위해 거의 필수적으로 사용된다.

사용하는 이유

• 과거에는 스크롤 이벤트를 직접 등록해서 구현했지만, 두 방식에는 큰 차이가 있다.
• 스크롤 이벤트 (window.addEventListener('scroll', ...)): 스크롤할 때마다 함수가 실행되어 성능에 부담을 준다. (디바운싱이나 쓰로틀링 처리가 필수적이다.)
• Intersection Observer: 브라우저가 직접 요소를 감시하다가, 설정한 조건(화면에 노출됨)이 충족될 때만 신호를 준다. 성능 면에서 훨씬 효율적이다.

기본적인 사용법 (Hook 방식)

• 가장 많이 쓰이는 방식은 useInView 훅을 사용하는 것이다.

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

const MyComponent = () => {
  // ref: 감시할 요소를 지정
  // inView: 요소가 화면에 보이면 true, 아니면 false
  const { ref, inView } = useInView({
    threshold: 0, // 요소가 1픽셀이라도 보이면 감지 (0 ~ 1 사이 값)
    triggerOnce: false, // 딱 한 번만 감지할지 여부
  });

  return (
    <div ref={ref} style={{ height: '100px', background: 'lightblue' }}>
      {inView ? '보여요! 👀' : '안 보여요... 🙈'}
    </div>
  );
};