React Intersection Observer

React intersection observer 는 웹 개발자들이 요소의 가시성과 
화면 내 위치에 대한 정보를 얻을 수 있는 강력한 라이브러리 입니다. 
이 글에서는 React Intersection observer 의 사용법과 기능에 대해 자세히
알아보도록 하겠습니다.

 

Observer API 란?

Observer API 는 웹 애플리케이션에서 시스템 이벤트 및 상태 변화를 감지하는 데 사용되는 javascript API 입니다. 이 API 는 브라우저에서 실행되는 애플리케이션에서 사용자의 시스템 환경과 관련된 정보를 제공합니다.
observer API 는 사용자의 네트워크 연결 상태, 배터리 수준, 장치 방향, 화면 밝기 등과 같은 정보를 확인할 수 있습니다. 

따라서 이를 통해 사용자에게 최적화된 경험을 제공할 수 있습니다.

react intersection observer 란?

React Intersection Observer 은 웹 개발에서 사용되는 강력한 라이브러리로, 요소의 가시성 및 화면 내 위치를 모니터링하는 데 도움을 줍니다. 이 라이브러리는 React 애플리케이션에서 요소가 화면에 보이는지 여부를 확인하고 이에 따른 작업을 수행할 수 있게 해줍니다. 

 

설치 및 사용법

 

React Intersection observer 를 사용하려면 먼저 패키지를 설치해야 합니다. 

npm install react-intersection-observer
yarn add react-intersection-observer

 

React Intersection observer 을 사용하여 요소의 가시성을 확인하는 가장 간단한 방법은 컴포넌트를 작성하고 IntersectionObserver 컴포넌트로 감싸는 것입니다.

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

const MyComponent = () => {
  const [ref, inView] = useInView();
  
  return (
    <div ref={ref}>
      {inView ? "보입니다." : "안보입니다."}
    </div>
  )
}

 

여러가지 옵션들

React Intersection observer 을 사용하면 여러 옵션과 이벤트 핸들러를 활용할 수 있습니다.

React Intersection observer 은 기본적으로 화면 전체를 루트로 삼지만, 마진을 추가하여 화면에 요소가 나타나기 전에 이벤트를 

발생시키거나 특정 요소를 루트로 설정하여 특정 요소가 보일 때 React Intersection observer 을 적용한 요소를 트리거 할 수 있습니다.

const [ref, inView] = useInView({
  root: document.querySelector("#scroll-container"),
  rootMargin: '10px',
})

 

또한 가시성을 감지하는 동안 트리거 및 이벤트 핸들러를 사용하여 원하는 작업을 수행할 수 있습니다.

const [ref, inView] = useInView({
  threshold: 0.5, // 가시성이 50% 일떄 트리거
  onChange: (inView) => {
    if(inView) {
      // 요소가 보일 때 실행할 작업
    } else {
      // 요소가 화면에서 사라질 때 실행할 작업
    }
  }
})

 

어떨 때 활용할까요??

lazy loading 

Lazy Loading 이미지를 구현하고 싶을 때 해당 라이브러리를 사용하여 이미지가 화면에 보일 때 이미지를 로딩할 수 있습니다.

무한 스크롤

무한 스크롤을 구현하려면 페이지가 스크롤될 때 추가 컨텐츠를 로드하는 것을 감지할 수 있습니다.

애니메이션 효과

요소가 화면에 보일 때 애니메이션 효과를 부여할 수 있습니다.