IntersectionObserver 간략히 살펴보기

IntersectionObserver란 무엇인가?

IntersectionObserver를 사용하는 이유

• 스크롤 이벤트 리스너의 콜백이 과도하게 호출될 수 있습니다. (하지만 디바운스나 스로틀 기법을 통해 이 문제를 최적화할 수 있습니다.)

• 특정 영역을 감지하려면 getBoundingClientRect() 함수를 사용해야 합니다. 이 함수를 사용할 때마다 reflow가 발생합니다. 즉, 브라우저 전체 또는 특정 영역의 레이아웃이 다시 그려집니다.

Reflow: 브라우저가 전체 화면 또는 일부 화면을 다시 그려야 할 때 발생합니다.

IntersectionObserver 사용법 (간단히)

const observer = new IntersectionObserver(callback, options);

IntersectionObserver: callback

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // 각 entry는 하나의 타겟 요소에 대한 교차 상태 변화를 설명합니다:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

IntersectionObserver: options

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
};

let observer = new IntersectionObserver(callback, options);

• threshold: 1.0은 루트 요소에서 뷰포트까지 100% 가시성을 의미합니다. 25% 가시성을 원하면 0.25로 설정할 수 있습니다. 또는 [0, 0.25, 0.5, 0.75, 1]과 같이 배열을 설정하여 해당 비율에 따라 콜백이 실행되도록 할 수 있습니다.

• root: 루트 요소는 가시성을 감지하는 뷰포트의 기준입니다. 기본값은 브라우저의 뷰포트입니다. root 값이 null이거나 undefined일 경우 기본값이 설정됩니다.

• rootMargin: 루트 요소의 여백 값입니다. 이 속성 값은 CSS margin과 유사합니다. 예: "10px 20px 30px 40px" (상, 우, 하, 좌). 이 값은 퍼센트로 설정할 수도 있습니다. 이 속성은 계산 전에 바운딩 박스를 확장하거나 축소합니다. 기본값은 0입니다.

IntersectionObserver: observer 객체

let observer = new IntersectionObserver(callback, options);
let target = document.querySelector('#listItem');
observer.observe(target);

...

observer.unobserve(target);
observer.disconnect();

• observe (함수): 특정 HTML 요소를 감시합니다.

• unobserve (함수): 특정 HTML 요소의 감시를 중지합니다.

• disconnect (함수): 모든 HTML 요소에 대한 감시를 중지합니다.

실제 예시로 IntersectionObserver 사용하기

예시 1. 무한 스크롤

useEffect(() => {
  let observer: IntersectionObserver;
  observer = new IntersectionObserver(
      (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
          const [entry] = entries;
          if (
              !entry.isIntersecting ||
              articles.length < DEFAULT_PAGINATION_COUNT
          ) {
              return;
          }
          loadMore();
          observer.unobserve(loadingIndicatorElementRef.current as Element);
      },
      {
          threshold: 0.5,
      }
  );

  if (loadingIndicatorElementRef.current) {
      observer.observe(loadingIndicatorElementRef.current as Element);
  }

  return () => {
      if (observer) {
          observer.disconnect();
      }
  };
}, [articles.length, loadMore]);

...

return (
  ...
      <div
          className={css`
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              margin-top: 10px;
              margin-bottom: 10px;
          `}
          ref={loadingIndicatorElementRef}
      >
          {isLoading && <RotatingLines width="100" />}
      </div>
	</ArticleListContainer>
)

예시 2. 동적으로 고정되는 사이드바

const NavItemList = styled.ul<{ isFixed: boolean }>`
    position: ${(p) => (p.isFixed ? 'fixed' : 'relative')};
    top: ${(p) => (p.isFixed ? '1rem' : '0px')};
    width: ${(p) => (p.isFixed ? '230px' : '100%')};

...
`;

...

useEffect(() => {
    let observer: IntersectionObserver;
    observer = new IntersectionObserver(
        (entries, observer) => {
            const [entry] = entries;

            if (entry.isIntersecting) {
                setIsFixed(false);
            } else {
                setIsFixed(true);
            }
        },
        {
            threshold: 0.1,
        }
    );

    if (sideBarTopSpaceRef.current) {
        observer.observe(sideBarTopSpaceRef.current as Element);
    }

    return () => {
        if (observer) {
            observer.disconnect();
        }
    };
}, []);

return (
  <Container style={{ position: 'relative' }}>
      <div
          ref={sideBarTopSpaceRef}
          style={{
              height: '90px',
          }}
      />
      <NavItemList isFixed={isFixed}>
          <NavItem>
              <Link href={`/`} passHref>
                  <NavLink matched={router.pathname === '/'}>
                      <NavLinkText>All</NavLinkText>
                  </NavLink>
              </Link>
          </NavItem>
...