만들면서 많은 api호출을 하게됐다. 영어외 다른언어의 이름을 가져오거나, 속성에 따른 폰트의 컬러를 불러오거나 등등 api를 통해서 여러가지의 데이터를 불러오곤 하는데.
특히 인피니티 스크롤을 하면서 엄청나게 불러온다. 밑에 보면 움직일때 마다 저런식으로 호출을 해서 데이터를 뽑아온다. 다시 스크롤링을 하면서 뷰포트에서 벗어난 부분도 다시 호출 되게 된다. 내리지도 않는 화면에 보이지 않는 부분 또한 호출하게 된다. 결국 계속 불필요하게 호출을 하게 된다.
실제로 보이는 부분에만 데이터를 가져오게끔 하려는데

그때 사용하게 된게 Intersection Observer API이다.

Intersection Observer API?

타켓 요소와 상위 요소 또는 최상위 document의 viewPort(화면에 보여지고 있는 영역) 사이에 Intersection내 변화를 비동기적으로 관찰하는 방법이다.

설치

npm install react-intersection-observer-hook

사용 예제

import React, { useEffect } from 'react';
import { useIntersectionObserver } from 'react-intersection-observer-hook';
// ...

function Example() {
  // `useIntersectionObserver` returns a tuple.
  // We need to give this `ref` callback to the node we want to observe.
  // The second item, `entry` is the response of the initially created `IntersectionObserver` instance.
  const [ref, { entry }] = useIntersectionObserver();
  const isVisible = entry && entry.isIntersecting;

  useEffect(() => {
    console.log(`The component is ${isVisible ? 'visible' : 'not visible'}.`);
  }, [isVisible]);

  return <SomeComponentToTrack ref={ref} />;
}

isVisible를 UseEffect 디펜던시 변수로 설정을 해줘서
리스트에 이름이 로딩이 되었을때,isVisible이 변동되었을때만 호출되게

우선 나도 강의를 들으면서 코딩을 계속 해보고 있는데 이러한 툴이 있는것을 몰랐다.
이번 작업을 통해서 알게되었는데,처음 Traviary작업을 할때 무한 스크롤을 하면서 계속되는 필요없는 데이터호출에 어떻게 해결해야하나 했는데 IntersectionObserver를 적절하게 적용해보면 해결해볼수도 있을법 하다고 생각했다.