[항해 99 주특기 주차 14일차]

<회고록>

오늘은 무한 스크롤을 구현하면서 확대를 했을 때 무한 스크롤이 구현되지 않은 이유와 대책에 대해서 설명을 하려고 한다.

1. 확대를 했을때 왜 무한 스크롤이 작동하지 않은 거지?..

확대를 했을 때 무한 스크롤이 구현되지 않은 가장 핵심적인 이유는 clientHeight때문에 그렇다. 내가 확대 , 축소를 해도 document의 height는 변함이 없다. 하지만 내가 확대 축소를 할 때 clientHeight는 변함이 있다. 즉 확대를 했을때 clientHeight는 기존의 100%보다 훨씬 작아졌을 것이고 이는 결국엔 스크롤의 맨 하단과 document의 가장 하단 사이의 임의의 빈 공간이 생기게 된다. 이는 결국 어떻게든 밑으로 내려도 그 공백을 채울 수 없으며 결국엔 스크롤의 가장 하단을 찾지 못하게 된다.

2. 이를 어떻게 해결했게?

나는 이를 밑 하단에 가장의 박스를 두고 이를 이용해서 무한 스크롤을 구현했다. 만약 내가 화면을 확대한다고 해도 밑 하단 박스는 같이 따라 올 것이다. 즉 확대, 축소와 상관없이 밑 하단 박스는 항상 스크롤의 맨 하단을 가르키게 된다. 따라서 기존에 있었던 확대를 했을 때 무한 스크롤이 구현되지 않은 문제를 해결할 수 있다. 그렇다면 가장 하단의 박스로 스크롤이 가 있다는 것을 어떻게 확인할 수 있을까? 바로 박스가 화면에 보여지는 비율로 알 수 있다. 만약에 박스가 화면에 완전히 보여질때 값을 1, 화면에 완전히 가려질 때 값을 0으로 한다면 박스가 보이는 비율은 이 사이에서 값을 측정할 수 있다. 그렇다면 이를 어떻게 측정하는 가? 바로 옵저버 (관찰자) 를 통해서 확인할 수 있다. 즉 옵저버에 인수로 내가 비교할 대상을 보내주면 이를 가지고 옵저버는 해당 대상이 얼마나 나왔는지를 확인할 수 있고 이에 대한 이벤트를 줄 수 있다.

 

옵저버 인수 전달 코드

  const observe = (element) => {
    observer.current.observe(element);
  };

 

옵저버 이벤트 함수 코드

const observer = useRef(
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            callback();
          }
        });
      },
      { threshold: 1 }
    )
  );

여기서 threshold는 옵저버가 얼마나 보였는지를 나타내는 지표이다. 그리고 여기서 if문을 통해서 해당 entry가 내가 정한 기준만큼 나왔는지를 체크해서 만약 조건에 부합한다면 callback함수를 실행시킨다.