Feature/use-intersection-observer

[foresec]

👾 Pull Request

• 작업명: use-intersection-observer

• 티켓: [react hooks] useIntersectionObserver

• 상태: 신규

1️⃣ Spec

• IntersectionObserver API를 이용하여 요소의 가시성을 감지하는 커스텀 훅
• 기본적인 Intersection Observer API의 옵션값(root, rootMargin, threshold)과 부가적인 옵션값 및 실행할 콜백함수를 받음
• 감지할 요소의 상태를 설정하는 함수, 현재 감지 여부, 교차상태에 대한 자세한 관련 정보를 나타내는 객체를 반환

2️⃣ 변경 사항

• 변경 사항 없음

3️⃣ 예시 코드

1. 기본

  const { intersectionRef, isView, entry } = useIntersectionObserver();

 <div ref={intersectionRef}></div>

• intersectionRef : 훅에서 사용할 요소의 상태를 설정하는 데 사용되는 디스패치 함수. 감지하고자 하는 요소에 설정
• isView : 요소가 현재 뷰포트 내에 보이는지 여부를 나타내는 상태 값
• entry : Intersection Observer API를 사용하여 요소의 교차 상태와 관련된 정보를 나타내는 객체
  • entry와 관련된 자세한 사항은 https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry 에서 참고

2. IntersectionObserver API 기본 옵션

  const { intersectionRef, isView } = useIntersectionObserver({
    root: document.querySelector('#container') 
    rootMargin: '10px 20px 30px 40px' 
    threshold: 0.5,
  });

• root : 뷰포트 대신 사용할 요소 객체 지정. 기본적으로 브라우저의 Viewport가 사용됨(null)
• rootMargin : Root의 범위를 확장하거나 축소시킴
• threshold : observer가 실행되기 위한 최소한의 타켓의 가시성 비율

3. 부가옵션

  const { intersectionRef, isView } = useIntersectionObserver({
    initialView: true,
    visibleOnce: true,
  });

• initialView : 초기 감지값
• visibleOnce : 처음 한번만 감지

4. callback 함수

  const { intersectionRef, isView, entry } = useIntersectionObserver({
    onChange: (isView) => {
      if (isView) {
        console.log('visible');
      } else {
        console.log('x');
      }
    },
    onEnter() {
      console.log('onEnter');
    },
    onLeave() {
      console.log('onLeave');
    },
  });

• onChange : 타겟 엘리먼트의 가시성 상태가 변경될 때 호출할 콜백 함수
• onEnter : 타겟 엘리먼트가 화면에 나타날 때 호출할 콜백 함수
• onLeave : 타겟 엘리먼트가 화면에서 사라질 때 호출할 콜백 함수

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• https://heropy.blog/2019/10/27/intersection-observer/