Infinite Scroll, 무한 스크롤 코드 제작기

나를 약 3일간 괴롭히던 무한 스크롤의 굴레!!!
드디어 벗어나서, 관련 내용을 정리하고자ㅠㅠ 이렇게 작성하게 되었다

IntersectionObserver API

IntersectionObserver는 말 그대로 교차지점을 관찰해주는 역할을 해준다.
view port에 target이 관찰되는 순간을 포착해, callback 함수를 실행시켜줄 수 있도록 해준다.

다음은 IntersectionObserver를 이용해 작성한 코드이다.

  const [updated, setUpdated] = useState([]);
  const [fetchedData, setFetchedData] = useState([]);
  let fetchCount = 0;

  useEffect(() => {
    const mergedData = [...updated, ...fetchedData];
    setUpdated(mergedData);
  }, [fetchedData]);

const fetchData = async () => {
    fetchCount++;
    axios.get(`http://10.58.1.45:8000/products?offset=${16 * fetchCount}&limit=16`)
      .then((res) => {
      setFetchedData(res.data.updated_data);
    });
  };

 const intersection = () => {
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 1,
    };
    let callback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          if (entry.intersectionRatio >= 0.75) {
            fetchData();
          }
        }
      });
    };
    let target = document.querySelector(".observer");
    let observer = new IntersectionObserver(callback, options);
    observer.observe(target);
  };

target은 observer가 관찰할 타겟이고, 이 타겟이 threshold 비율만큼 화면에 노출되는 순간 observer가 이를 캐치하고 callback 함수를 실행시켜주는 역할을 한다.
forEach로 작성해주는 이유는 entries가 배열 상태로 들어오기 때문에 forEach로 작성해줬다.

처음에는 ScrollHeight값과 ScrollTop을 이용해서 제작했는데..
일반 목데이터를 쓸 때에는 괜찮았지만, API로 데이터를 받아서 제작하니까 바로 아주..
받아온 데이터가 사라지고 생기고 없어지고 진짜 말 그대로 널뛰기를 하며 엄청나게 호출을 많이 보내서ㅠㅠㅠ 하면서 엄청 고통스러웠다.
어디서 문제가 생기는지도 모르겠고, 늘기만 하면 어디서 호출이 계속되는구나! 하겠지만..
갑자기 수가 줄어들고 늘고 줄고 늘고.. 아마도 stackoverFlow로 인해 그랬던게 아닐까 라는 생각은 해보지만..!!!

IntersectionObserverAPI는 정말 코딩을 배우기 시작한 이래로 들어본 적도 없고,
자연스레 사용해본적도 없었던 친구라서 코드를 작성하면서 엄청 힘들었던 기억이 난다.
문서를 찾아봐도 무슨 소리인지 모르겠고..
그래도 이렇게 한 번 쓰고 나니 이해가 조금씩 되면서 이제는 비슷한 이벤트를 제작해도
조금 더 쉽게 제작할 수 있을것이라는 자신감이 붙었다!
자신감 뿜뿜 :)