💡 공식문서

react-intersection-observer

해당 라이브러리는 대상 요소가 *뷰포트와 교차하는 변경사항을 관찰해주는 역할을 합니다. 즉 화면(뷰포트)상에 우리가 지정한 타겟 엘레멘트가 보이고 있는지를 관찰하는 API입니다.

• 뷰포트(viewport)란 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다

💡 사용 이유

1. 호출 수 제한 방법 debounce, throttle을 사용하지 않아도 됩니다.

debounce와 throttle은 스크롤 이벤트로 인해 발생하는 불필요한 함수 호출 수를 컨트롤하는 방법들인데 이들이 필요한 이유는

window.addEventListener('scroll', function() {
   return console.log('scroll!');
});

위의 코드를 콘솔 창에 입력하고 스크롤을 조금만 해보면 단번에 이해할 수 있다. 위로 혹은 아래로 스크롤을 할 때마다 해당 함수가 수도 없이 호출됩니다. 대체로 이런 현상을 목적으로 스크롤 이벤트를 거는 것이 아니기 때문에 걷잡을 수 없이 호출되는 함수를 debounce와 throttle을 사용하여 컨트롤 하게 됩니다.

1. reflow를 하지 않는다.

스크롤 이벤트에서는 현재의 높이 값을 알기 위해offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 layout을 새로 그리게 됩니다. layout을 새로 그린다는 것은 렌더 트리를 재생성한다는 뜻인데, reflow라고도 불리는 이 과정이 반복되면 당연히 브라우저의 성능이 저하되고 화면의 버벅거림이 생길 수 밖에 없습니다.

💡기본적으로 사용되는 속성

root

뷰포트로 간주되는 대상입니다.

rootMargin

해당 라이브러리가 관찰할 뷰포트인 루트를 효과적으로 축소하기나 늘려줍니다.

아무런 설정을 하지 않으면 deafult 0px 0px 0px 0px입니다.

threshold

라이브러리가 관찰하는 교차 영역에서의 비율(임계값)을 말합니다.

0~1까지의 숫자로 설정됩니다. 최대 1(100%)까지 지정 가능하며, 0.7이라 하면 대상이 화면에 70% 이상 보이기 시작할 때 콜백 함수를 호출합니다.

💡기본적으로 사용되는 메서드

disconnect()

IntersectionObserver가 대상을 관찰하는 것을 중지

observe()

IntersectionObserver가 관찰할 대상을 가르쳐줌

unobserve()

IntersectionObserver가 특정요소의 관찰을 중지

takeRecords()

IntersectionObserver관찰된 모든 대상에대한 배열을 반환

💡 InView 태그

• 기본적인 사용법

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

const Component = () => (
  <InView>
    {({ inView, ref, entry }) => (
      <div ref={ref}>
        <h2>{`Header inside viewport ${inView}.`}</h2>
      </div>
    )}
  </InView>
);

를 사용하여 InView함수를 전달합니다. 위와 같이 컴퍼넌트를 감싸면 해당 함수가 감싼 컴퍼넌트에서의 상태가 변경이되면 새로운 값이 호출됩니다.

• inView

현재 가 관찰되고 있는지에대한 boolean값입니다.

• ref

가 감싸고있는 children요소에서 IntersectionObserver가 모니터링할 요소를 정해줍니다.

• entry

위 두개를 제외하고 조금더 세밀한 설정을 볼 수 있습니다.

위의 스크린샷은 IntersectionObserverEntry의 콘솔값 결과입니다.

• isIntersecting

intersectionObserver가 관찰하는 Root를 교차할때의 상태값 변화를 boolean값으로 표시합니다.

• time

교차값이 변화했을때의 timestamp를 기록해줍니다.

쉽게 생각하면 위의 isIntersecting의 상태값 변화한 순간의 시간입니다.

👉 사용 예시

// components>featured>ItemList.tsx

import { InView } from 'react-intersection-observer'; // 1

const onTrackingViewItem = (inView: boolean, itemIdx: number, entry: any): any => {
    if (inView) {
      //필요한 로직
    }
  };

				<InView key={index}> // 2
            {({ inView, ref, entry }) => ( // 3
              <S.ItemContainer>
                  <S.ItemSection
                    ref={ref} // 4
                    onChange={onTrackingViewItem(inView, itemIdx, entry)} //5
                    onClick={() => onItemClick(item)}>
                    <img src={item.media.imageUrl} className="itemImg" alt="상품 이미지" />
                    <S.ItemTitle>{item.title}</S.ItemTitle>
                    <S.ItemPrice>{item.property.price.text}</S.ItemPrice>
                    <SellState sellState={sellState} alt="상품 상태 이미지" />
                  </S.ItemSection>
              </S.ItemContainer>
            )}
          </InView>

itemlist가 뿌려지면 해당 이미지 마다 관찰이 필요했다.

유저가 어떤 상품을 보았는지 어떤상품을 클릭하였는지 등등

• 주석1번

해당 라이브러리에서 현재 프로젝트에서 필요한 함수가 포함된 컴퍼넌트 호출을 해줍니다.

• 주석2번

import해온 라이브러리가 children으로 필요한 요소들외부에서 감싸줍니다.

• 주석3번

해당 라이브러리 컴퍼넌트에서 필요하는 state값을 호출하여 children외부에서 감싸줍니다.

• 주석4번

intersectionObserver가 관찰할 부분을 명시합니다.

• 주석5번

내부 프로젝트에서 해당 상태변화에 따라 필요로하는 함수를 작성합니다.

💡 InfinitieScroll Hooks

크게 관찰자(observer) 와 관찰 대상(entry), 옵션(조건) 그리고 콜백함수(로직)가 존재합니다.

1. 관찰자를 생성합니다.
2. 관찰 대상을 생성합니다.
3. 관찰자는 관찰 대상을 관찰합니다
4. 관찰 대상이 조건을 만족하는 상태에 놓이게 된다면 콜백 함수를 실행합니다.

// hooks/useInfiniteScroll.tsx

const useInfiniteScroll = (props: UseInfiniteScrollProps) => {
  const { bottom, moreItemList } = props;
  const [page, setPage] = useState(1); 

  useEffect(() => {
    const options = {
      rootMargin: '30px', 
      threshold: 1 
    };
    // 관찰자를 생성
    const observer = new IntersectionObserver((entries) => {
      const target = entries[0];
      if (target.isIntersecting) {
        setPage((prev) => prev + 1);
      }
    }, options);
    observer.observe(bottom.current);
  }, []);

export default useInfiniteScroll;

👉 사용 예시

// components/featured/ItemList.tsx
import React, { useState, useRef } from 'react';
import useInfiniteScroll from 'hooks/useInfiniteScroll';

// 관측 대상 생성
const bottom = useRef(null);

// 무한 스크롤 훅스 사용
const page = useInfiniteScroll({ bottom, moreItemList });

// 아이템 목록 새로 불러오기
  const moreItemList = () => {
    const data = {
      page: page,
      limit: 50
    };
    const query = querystring.stringify(data);
    fetcher
      .get(`${ApiPath.featured.featured}/${featuredIdx}?${query}`)
      .then((res) => {
        const newItemList = res.data.list;
        setTotalItemList((totalItemList) => totalItemList.concat(newItemList));
      })
      .catch((error) => {
        console.error(error.message);
      });
  };

return (
// 관측 대상 선언
	<div>
	blah blah...
	<div ref={bottom} />
)

1. Intersection Observer 의 조건으로 무엇을 넣어줄 것인가?
   → 스크롤바가 바닥에 닿으면 새로운 데이터를 불러오게 만들자.
2. 관찰 대상 은 무엇인가?
   → 관찰 대상은 리스트의 맨 아래에 div 태그로 선언한다.
3. 어떤 로직(콜백함수) 를 넣어줄 것인가?
   → 새로운 데이터를 불러오는 로직(moreItemList)을 넣는다.

   ---

😱 velog 시작 전 블로그(tistory) 링크

https://yoohyeon.tistory.com/