React Infinite Scroll

🔔 Infinite Scrollは
ページの端がなく、情報があれば、終了まで制限なくページをダウンロードできる機能だと思います.
APIから情報を受信すると、10個が10個、20個が20個、それぞれが10個、終了後に待機し、さらに10個…このように行います.
🔔 scrollHeight scrollTop clientHeight

🔧
スクロールHeight値は、垂直スクロールバーを使用して要素のすべての内容を表示しない場合に必要な最小高さ値と同じです.
読み取り専用アトリビュートは、要素コンテンツの合計高さを表し、オーバーフローした非表示コンテンツが含まれます.

element.scrollHeight - element.scrollTop === element.clientHeight

最後までスクロール
scrollTop値は、エレメントの上部から最上部に表示されるコンテンツまでの距離を測定します.
読み取り専用プロパティとしてのElement.ClientHeightは、エンティティの内部高さをピクセルに復元します.
🔔 Reactで無限にスクロール
🔧 if (scrollTop + clientHeight >= scrollHeight)
スクロールの値と現在表示されているウィンドウの高さを加算します.これがスクロールの合計高さに等しいか、または大きくなると...ページ+1とapiがページ受信の関数として機能すると、ページが再入力され、次のapiで情報が受信されます.

  // 몇 페이지인지 알기 위함 한번 스크롤을 내리면 +1 해서 몇번 내렸는지 알려줌
  const [page, setPage] = useState(1);

  const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight) {
      setPage(page + 1);
    }
    }

  useEffect(() => {
    // scroll event listener 등록
    window.addEventListener('scroll', handleScroll);
      return () => 
      // 끝나면 scroll event listener 제거해서 계~속 더 못 내리게
      {window.removeEventListener('scroll', handleScroll)
}