React에서 getBoundingClientRect 활용하기

React에서 getBoundingClientRect 활용하기

getBoundingClientRect는 DOM 요소의 크기와 화면에서의 위치를 정확히 파악할 수 있는 메서드입니다. 이 메서드는 React에서 특정 요소가 화면에 보이는지 감지하거나, Lazy Loading, 애니메이션 트리거 등을 구현할 때 매우 유용합니다. 아래는 getBoundingClientRect를 활용한 다양한 React 예제입니다.

---

1. 요소가 화면에 보이는지 확인하기

아래 코드는 특정 요소가 화면에 보이는지 여부를 감지하는 컴포넌트입니다.

import { useEffect, useRef, useState } from "react";

const InViewportComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  const checkVisibility = () => {
    if (ref.current) {
      const rect = ref.current.getBoundingClientRect();
      setIsVisible(rect.top >= 0 && rect.bottom <= window.innerHeight);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", checkVisibility);
    checkVisibility(); // 초기 상태 확인

    return () => {
      window.removeEventListener("scroll", checkVisibility);
    };
  }, []);

  return (
    
      
        스크롤해서 아래 박스를 확인하세요.
      
      
        {isVisible ? "보이는 상태!" : "보이지 않는 상태"}
      
      
    
  );
};

  ;