React 스크롤 방향 찾기

본 포스트는 React에서 스크롤 방향을 얻는 방법에 대한 포스팅입니다.

📌 쓰로틀링 헬퍼 함수

사용해도 동작에는 변화가 없으나 더 효율적으로 동작시키기 위해서 사용했습니다.

throttle이란 일정주기내에 한 번의 이벤트만 발생하도록 해주는 기술을 의미합니다.

먼저 헬퍼 함수의 사용 이유에 대해 알아보겠습니다.
스크롤 이벤트는 한번 스크롤에 수십번이 반복적으로 발생합니다.
하지만 제가 원하는 것은 “한 번 스크롤에 하나의 이벤트 발생으로 어떤 방향으로 스크롤 했는지” 입니다.
스크롤 이벤트에 의해서 발생하는 수십번 중에 단 한 번만 실행하면 되는 것이죠.
따라서 아래의 헬퍼 함수를 통해서 일정 기간 내 여러 번의 실행 중 단 하나만 실행하도록 동작을 제어합니다.

export const throttleHelper = (callback: () => void, waitTime: number) => {
  let timerId: ReturnType<typeof setTimeout> | null = null;

  return () => {
    if (timerId) return;

    timerId = setTimeout(() => {
      callback();
      timerId = null;
    }, waitTime);
  };
};

📌 스크롤 방향 얻기

방향을 구하는 이론은 간단합니다.
이전 스크롤 위치를 기록하고 현재 스크롤 위치와 빼주고 그 값의 범위로 방향을 찾을 수 있습니다.
또한 추가로 최하단으로 스크롤을 내린 경우를 따로 알 수 있도록 처리했습니다.

import { useCallback, useEffect, useState } from "react";

declare function throttleHelper(callback: () => void, waitTime: number): () => void;

/**
 * 마지막 스크롤링의 방향을 알아내는 훅
 * @returns [스크롤 방향, 스크롤 최하단 여부, 현재 스크롤 위치] 순서로 반환 ( boolean, boolean, number )
 */
const useScrollDirection = () => {
  // 마지막 스크롤 방향
  const [isUp, setIsUp] = useState(false);
  // 현재 스크롤 위치값 저장할 변수
  const [pageY, setPageY] = useState(0);
  // 현재 스크롤이 최하단에 있는지 판단할 변수
  const [isBottom, setIsBottom] = useState(false);

  // 현재 스크롤 방향을 확인할 스크롤 이벤트 함수
  const handleScroll = useCallback(() => {
    /**
     * scrollHeight: 총 컨텐츠 높이
     * clientHeight: 현재 보이는 높이 ( 현재 화면(컨텐츠)의 높이 )
     * scrollY: 현재 스크롤 높이
     *
     * 따라서 "총 컨텐츠 높이 === 현재 보이는 높이 + 현재 스크롤 높이" 라면 최하단까지 스크롤을 내린 것
     */
    const {
      scrollY,
      document: {
        documentElement: { scrollHeight, clientHeight },
      },
    } = window;

    const deltaY = scrollY - pageY;
    const isUp = scrollY !== 0 && deltaY >= 0;
    const isBottom = scrollHeight - scrollY - clientHeight === 0;

    setIsUp(isUp);
    setPageY(scrollY);
    setIsBottom(isBottom);
  }, [pageY, setIsUp, setPageY, setIsBottom]);

  // 스크롤 이벤트에 쓰로틀링 적용
  const throttleScroll = throttleHelper(handleScroll, 50);

  // 스크롤 이벤트 등록
  useEffect(() => {
    document.addEventListener("scroll", throttleScroll);
    return () => document.removeEventListener("scroll", throttleScroll);
  }, [throttleScroll]);

  return [isUp, isBottom, pageY];
};

export default useScrollDirection;

📮 레퍼런스

1. 1-blue - throttle