無限スクロールIntersection Observer

ロールイベント
無限スクロールを実施する場合、最初はスクロールイベントとして適用される.
他の方法が分からないからです.

const infiniteScroll = () => {
	if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
   		높이가 바닥에 닿았을때 api호출
    }
    console.log("scroll")
}
window.addEventListener('scroll', infiniteScroll);

機能は正常に動作していますが、上記の方法ではスクロールするたびにイベントが発生します.
その結果,この関数は数回も呼び出されていないことが分かった.

この問題を解決するためにはdebonseとthrottleを用いて制御する必要がある.

debounce throttle

이벤트 핸들러가 많은 연산(예 : 무거운 계산 및 기타 DOM 조작)을
수행(이벤트 핸들러의 과도한 횟수가 발생하는 것)하는 경우에 대해 제약을 걸어 제어할 수 있는 수준으로 
이벤트를 발생(그 핸들러를 더 적게 실행하면 빠져 나갈 수 있음)시키는 것을 목표 로 하는 기술

출처:  [Web Club]

Intersection Observer
もっと良い方法でIntersection Observerを使うことができて、私はコードを交換しました
ターゲット要素と親要素または最上位ドキュメントのビューポート間の交差
非同期観察
すなわち、ターゲットがビューポートと交差し、非同期で動作するかどうかを観察するためのAPIである.

const observer = new IntersectionObserver(callback, {
  root: null, // 또는 scrollable 한 element
  rootMargin: '0px'
  threshold: 0.5 
})

root
ターゲットを囲む要素(container)
default nullとして指定した場合はviewportです.
rootMargin
ルート要素を囲むmargin
pxまたは%単位で記述できる文字列形式で記述する必要があります.
threshold
ルートとターゲット要素の交差面積の割合
パーセンテージを超えたときにcallbackを実行することを決定する値(0.0～1.0).

const io = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
         // 타겟이 교차되면 api 호출
        }
    });
});

debonse、throttleを使わずに解決に近づきやすい方法だと思います
[参考ブログ]
https://samsara1019.tistory.com/77
https://tech.lezhin.com/2017/07/13/intersectionobserver-overview
https://y0c.github.io/2019/06/30/react-infinite-scroll/