TIL

# 22-07-17

많은 웹사이트가 페이지 형식이 아닌, 무한 스크롤 형식으로 다음 데이터들을 화면에 보여주고 있다. 특히 모바일로 접속하는 사용자가 많아지면서, 이러한 경향이 뚜렷해 지고 있다.

# 무한스크롤 구현

# scroll 이벤트로 구현해보기

scroll이벤트를 이용하여 구현해 보자!🖱️

geometry property

👉 이미지 출처: javascript.info - 요소 사이즈와 스크롤 (opens new window)

스크롤바가 현재 페이지 하단까지 내려왔다는 사실을 어떻게 알 수 있을까?

  1. 현재 페이지의 총 높이를 알고
  2. 이미 스크롤 된 영역의 높이 + 현재 보여지는 영역의 높이를 안다면

두 높이를 비교하여 알 수 있을 것이다.

scrollTop + clientHeight >= scrollHeight

즉, 페이지의 총 높이(scrollHeight)와 이미 스크롤 되어 보이지 않는 영역의 높이(scrollTop) + 현재 보여지는 영역의 높이(clientHeight)를 비교하는 방법으로 알아낼 수 있었다.

하지만 scroll이벤트는 사용자는 '한 번' 스크롤 했다고 여겨지는 때에도 매우 자주 호출되게 된다. 최적화가 필요한 시점이다.

# throttle 로 최적화 하기

TypeScript로 throttle 구현

const throttle = <T extends any[]>(
  callback: (...args: T) => any,
  delay: number
) => {
  let timer: ReturnType<typeof setTimeout> | null = null;

  return (...args: T) => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        callback(...args);
      }, delay);
    }
  };
};

사용 예

const throttle적용된함수 = throttle(함수, DELAY_MS);

# React에서 scroll 이벤트 적용

useEffect(() => {
  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, [handleScroll]);

컴포넌트가 마운트 될 때 scroll 이벤트를 등록하고, 언마운트 될 때 해제한다.

  • 무한스크롤을 구현하는 방식은 이 외에도 IntersectionObserver 등을 사용하는 방법, 최적화 방법도 requestAnimationFrame을 사용하는 방법 등이 있다고 한다. 하나씩 구현해보면서 공부해보자✍✍
  • 이번에는 throttle로 최적화했지만, 다음 페이지를 참고해서 다른 방법으로 최적화 해보자!😯

← 22-07-19 →