useIntersectionObserver

Intersection Observer API를 사용하여 요소의 가시성 변화를 관찰하는 Hook입니다. 무한 스크롤, 이미지 레이지 로딩 등에 유용합니다.

Props

이름	타입	설명	기본값
root	`Element \| null`	가시성을 확인할 뷰포트 요소, 뷰포트를 지정하지 않을 경우 브라우저의 뷰포트를 사용합니다.	`null`
rootMargin	`string`	루트 요소의 마진	`'0px'`
threshold	`number \| number[]`	콜백 실행 시점의 가시성 퍼센티지 (0~1)	`0`
onChange	`(entry: IntersectionObserverEntry) => void`	가시성 변경 시 호출되는 콜백	-
onEnter	`() => void`	요소가 뷰포트에 진입 시 호출되는 콜백	-
onLeave	`() => void`	요소가 뷰포트에서 벗어날 때 호출되는 콜백	-
unobserveOnEnter	`boolean`	진입 후 관찰 중지 여부	`false`
unobserveOnLeave	`boolean`	관측된 후 뷰포트에서 벗어날 때 관찰 중지 여부	`false`

Return

ref: 관찰할 요소에 연결할 ref 객체
observe: 관찰 시작 함수
unobserve: 관찰 중지 함수

Usage

import { useIntersectionObserver } from '@teamsparta/react';
 
function Example() {
  const { ref } = useIntersectionObserver({
    onEnter: () => console.log('요소가 화면에 나타남'),
    onLeave: () => console.log('요소가 화면에서 사라짐'),
  });
 
  return <div ref={ref}>관찰할 요소</div>;
}

Example

무한 스크롤

function InfiniteScroll() {
  const [items, setItems] = useState<string[]>([]);
  const [isLoading, setIsLoading] = useState(false);
 
  const { ref } = useIntersectionObserver({
    onEnter: async () => {
      if (isLoading) return;
 
      setIsLoading(true);
      const newItems = await fetchMoreItems();
      setItems((prev) => [...prev, ...newItems]);
      setIsLoading(false);
    },
  });
 
  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
      <div ref={ref}>{isLoading ? '로딩 중...' : '더 보기'}</div>
    </div>
  );
}

useHover useInterval