Muscardinus

Infinite Scroll 본문

FrontEnd/Basic Skills

Infinite Scroll

Muscardinus 2022. 1. 31. 00:23
728x90

Intersection Observer를 사용하여 끝부분이 intersect가 됐을때 Data를 새로 fetch하는 방식으로 하면 된다.

만약, Intersection을 사용하기 싫다면, debounce를 사용하는 것이 옳다고 생각한다.

Throttle의 경우 일정 시간마다, fetch를 발생시킬 경우 불필요한 자원이 소비되기 때문에, 마지막 행위만 처리되는 debounce가 더 적합한거 같다.

 

Vanilla JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <script defer src="index.js"></script>
  </head>
  <body>
    <div id="app" class="loading">
      <ul id="list"></ul>
      <div id="fetchMore"></div>
    </div>
  </body>
</html>
const app = document.querySelector("#app");
const fetchMoreTrigger = document.querySelector("#fetchMore");
let page = 0;

const fetchMore = async () => {
  const target = page ? fetchMoreTrigger : app;
  target.classList.add("loading");
  await renderList(page++);
  target.classList.remove("loading");
};

const fetchMoreObserver = new IntersectionObserver(([{ isIntersecting }]) => {
  if (isIntersecting) fetchMore();
});
fetchMoreObserver.observe(fetchMoreTrigger);

fetchMore();

React

import React, { useRef, useEffect } from "react";

const FetchMore = ({ loading, setPage }) => {
  const fetchMoreTrigger = useRef(null);
  const fetchMoreObserver = new IntersectionObserver(([{ isIntersecting }]) => {
    if (isIntersecting) setPage(page => page + 1);
  });

  useEffect(() => {
    fetchMoreObserver.observe(fetchMoreTrigger.current);
    return () => {
      fetchMoreObserver.unobserve(fetchMoreTrigger.current);
    };
  }, []);

  return (
    <div
      id="fetchMore"
      className={loading ? "loading" : ""}
      ref={fetchMoreTrigger}
    />
  );
};

export default FetchMore;
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Dropdown Menu  (0) 2022.03.13
Auto Complete  (0) 2022.03.13
Search bar  (0) 2022.02.09
Scroll Top  (0) 2022.01.31
Scroll Spy  (0) 2022.01.31
'FrontEnd/Basic Skills' Related Articles more
Comments