React - 무한 스크롤 후크 만들기

8846 단어 reactjavascript

배너 이미지 출처: https://commons.wikimedia.org/wiki/File:React_Native_Logo.png



이번 포스트에서는 React를 사용하여 "페이지 최하단 초밥 시"를 전달하는 버퍼 콜백을 실행시키는useInfiniteScroll hook을 만들어 볼 것입니다.

예를 들어, 많은 양의 목록형 아이템을 페이지에 표시할 때, 최초 n개의 아이템을 먼저 표시한 후 "페이지 최하단 초밥"n개의 아이템을 추가로 표시해야 하는 경우useInfiniteScroll hook을 사용할 수 있습니다. 있습니다. 그 외 "페이지 최하단 횟시"고유한 논리를 구현해야 하는 경우에도 사용할 수 있습니다.

저글링은 샌드박스 링크 에 방문하여 소스코드를 먼저 살펴봐주세요.

무한 스크롤 사용



먼저 useInfiniteScroll.js 파일 생성 후 아래 코드를 작성합니다.

import { useEffect } from "react";

function useInfiniteScroll(callback) {
  useEffect(
    () => {
      function scrollBottom() {
        // ???
      }

      // 2. 이벤트 핸들러 등록
      window.addEventListener("scroll", scrollBottom);

      // 3. 클린업 함수 작성
      return () => {
        window.removeEventListener("scroll", scrollBottom);
      };
    },
    // 1. 디펜던시 추가
    [callback]
  );
}

export default useInfiniteScroll;


  • useEffect hook의 디펜던시에 전달하는 callback 을 추가합니다. 즉, callback를 기준으로 하면 useEffect hook이 다시 실행될 수 있도록 도와줍니다.
  • addEventListener 메서드를 사용하여 window 객체에 스크롤 이벤트 핸들러( scrollBottom )를 등록합니다.
  • callback 의례가 실행될 때 클린업을 빌드합니다.


    • 다음은 scrollBottom 드디어에서 callback 을 실행시키는 조건을 작성해 주세요 합시다. 먼저 "페이지 최하단 초밥"이라는 조건을 추가해야 하고, 먼저 아래 코드를 확인해주세요.

    import { useEffect } from "react";

function useInfiniteScroll(callback) {
  useEffect(() => {
    function scrollBottom() {
      const {
        scrollTop,
        clientHeight,
        scrollHeight,
      } = document.documentElement;

      // 페이지 최하단 스크롤 시
      if (scrollTop + clientHeight >= scrollHeight) {
        // callback을 실행
        callback();
      }
    }

    window.addEventListener("scroll", scrollBottom);

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

export default useInfiniteScroll;


    위 코드를 꿴 "페이지 최하단 초밥"이라는 조건을 scrollTop + clientHeight >= scrollHeight 으로 감지하는 데, 해당 조건에서 사용하는 각 값에 요리가 필요합니다.

    먼저 document.documentElement는 HTML 문서의 루트 요소( <html> 요소)를 의미합니다. 즉, 위 예제 코드에서 사용된 scrollTop , clientHeight , scrollHeight 은 각각 <html> 요소의 프로퍼티입니다.
    Element.scrollTop 프로퍼티는 접근자 프로퍼티(접근자 속성)를 참조하여 모든 값을 반환할 수 있으며, 이 값이 의미하는 것은 "해당 요소가 수직으로 낚아 올린 큰 값"입니다. 즉, 위 예시의 경우<html> 요소가 수직으로 큰 범위 값을 의미합니다.

    Element.scrollTop

    The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

    출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop


    Element.clientHeight 프로퍼티는 전체 전용 프로퍼티로서 요소의 내부 높이(height + padding - height of horizontal scrollbar)를 나타냅니다. 단, <html> 요소의 clientHeight 프로퍼티는 뷰의 높이를 나타냅니다.

    Element.clientHeight

    When clientHeight is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.

    출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight



    마지막으로 Element.scrollHeight 프로퍼티는 읽기 전용 프로퍼티로서 요소의 높이를 나타내는 데, 내가 주는 요리 중에는 초밥이고 화면에 보이지 않는 영역까지 포함하여 계산된 값입니다.

    Element.scrollHeight

    The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

    출처: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight


    scrollBottom 핸들러에서 사용한 조건을 그림으로 표시하면 탐색할 수 있습니다.



    즉, useInfiniteScroll hook는 이미 쑤셔진 높이( scrollTop ) + 뷰포트 높이( clientHeight )의 값이 초밥이 될 수 있는 높이( scrollHeight )보다 큰면 전달 랭크 callback을 실행하는 hook입니다 .

    이번 포스트는 마지막으로 완벽합니다.

    최소 2 곱하기법으로 삼차원 곡선 낚시를 하다
    Springboot 소스 항목 수집

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage