사용자 지정 usePageBottom() 반응 후크를 만드는 방법

React 앱에서 때때로 사용자가 페이지 하단으로 스크롤한 시점을 아는 것이 중요합니다.

예를 들어 Instagram과 같이 무한 스크롤이 있는 앱에서는 사용자가 페이지 하단에 도달하면 더 많은 게시물을 가져와야 합니다.



무한 스크롤 생성과 같은 유사한 사용 사례에 대해 usePageBottom 후크를 생성하는 방법을 살펴보겠습니다.

utils 폴더에 별도의 파일 usePageBottom.js를 만들고 동일한 이름의 함수(후크)를 추가하는 것으로 시작합니다.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {}

다음으로 사용자가 페이지 하단에 도달하는 시점을 계산해야 합니다. window 의 정보로 이를 확인할 수 있습니다. 이에 액세스하려면 후크가 호출되는 구성 요소가 마운트되어 있는지 확인해야 하므로 빈 종속성 배열과 함께 useEffect 후크를 사용합니다.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  React.useEffect(() => {}, []);
}

사용자는 창의 innerHeight 값과 문서의 scrollTop 값을 더한 값이 offsetHeight와 같을 때 페이지 하단으로 스크롤한 것입니다. 이 두 값이 같으면 결과는 true이고 사용자는 페이지 맨 아래로 스크롤했습니다.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  React.useEffect(() => {
    window.innerHeight + document.documentElement.scrollTop === 
    document.documentElement.offsetHeight;
  }, []);
}

이 식의 결과를 변수 isBottom에 저장하고 bottom라는 상태 변수를 업데이트하여 궁극적으로 후크에서 반환합니다.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    const isBottom =
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight;
    setBottom(isButton);
  }, []);

  return bottom;
}

그러나 우리의 코드는 작동하지 않습니다. 왜 안 돼?

문제는 사용자가 스크롤할 때마다 isBottom를 계산해야 한다는 사실에 있습니다. 결과적으로 window.addEventListener 로 스크롤 이벤트를 수신해야 합니다. 사용자가 스크롤할 때마다 호출되는 handleScroll 라는 로컬 함수를 생성하여 이 표현식을 재평가할 수 있습니다.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    function handleScroll() {
      const isBottom =
        window.innerHeight + document.documentElement.scrollTop 
        === document.documentElement.offsetHeight;
      setBottom(isButton);
    }
    window.addEventListener("scroll", handleScroll);
  }, []);

  return bottom;
}

마지막으로 상태를 업데이트하는 이벤트 리스너가 있으므로 사용자가 페이지에서 벗어나 구성 요소가 제거되는 이벤트를 처리해야 합니다. 추가한 스크롤 이벤트 리스너를 제거해야 하므로 더 이상 존재하지 않는 상태 변수를 업데이트하려고 시도하지 않습니다.
useEffect 와 함께 window.removeEventListener 에서 함수를 반환하여 이를 수행할 수 있습니다. 여기서 동일한 handleScroll 함수에 대한 참조를 전달합니다. 그리고 끝났습니다.

// utils/usePageBottom.js
import React from "react";

export default function usePageBottom() {
  const [bottom, setBottom] = React.useState(false);

  React.useEffect(() => {
    function handleScroll() {
      const isBottom =
        window.innerHeight + document.documentElement.scrollTop 
        === document.documentElement.offsetHeight;
      setBottom(isButton);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return bottom;
}

이제 페이지 하단에 도달했는지 여부를 알고 싶은 모든 함수에서 이 코드를 간단히 호출할 수 있습니다. 다음은 무한 스크롤을 사용하는 피드 구성 요소에서 어떻게 사용했는지에 대한 한 가지 예입니다.

// components/Feed.js
import React from "react";
import usePageBottom from "../utils/usePageBottom";

function Feed() {
  const isPageBottom = usePageBottom();

  React.useEffect(() => {
    // if no data or user hasn't scroll to the bottom, don't get more data
    if (!isPageBottom || !data) return;
    // otherwise, get more posts
    const lastTimestamp = data.posts[data.posts.length - 1].created_at;
    const variables = { limit: 20, feedIds, lastTimestamp };
    fetchMore({
      variables,
      updateQuery: handleUpdateQuery,
    });
  }, [isPageBottom, data, fetchMore, handleUpdateQuery, feedIds]);
}

자신의 클라이언트 렌더링 React 앱에서 이 후크를 자유롭게 사용하세요!

이 게시물을 즐기십니까? 리액트 부트캠프에 참여하세요

The React Bootcamp은 React 학습에 대해 알아야 할 모든 것을 비디오, 치트 시트 및 특별 보너스를 포함하여 하나의 포괄적인 패키지로 묶습니다.

수백 명의 개발자가 이미 React를 마스터하고 꿈의 직업을 찾고 미래를 통제하는 데 사용한 내부 정보를 얻으십시오.


열릴 때 알림을 받으려면 여기를 클릭하십시오.