쉬운 단계로 무한 스크롤링을 마스터하세요

무한 스크롤

브라우저에서 제공하는 IntersectionObserver API를 이용하여 무한 스크롤을 구현할 수 있습니다.
구현하려면 다음 단계를 따르기만 하면 됩니다.-

1. 무한 스크롤을 위해 모의 API를 사용한 다음 사용자 정의 후크를 생성할 수 있습니다
2. 이 사용자 정의 후크는 API의 매개변수를 자체 함수 매개변수로 사용합니다.
3. 그런 다음 useEffect와 axios를 사용하여 기능 매개변수의 매개변수를 전달하는 간단한 API 호출을 구현할 수 있습니다.
4. 로드, 오류, hasMore 및 데이터를 상태로 가질 수 있습니다
5. 그런 다음 setTimeout을 사용하여 로딩 및 무한 스크롤을 제대로 확인할 수도 있습니다
6. hasMore는 API 호출에서 얻은 것과 비교하여 현재 페이지에 표시되는 데이터 배열의 길이와 동일합니다
7. 이 기능은 데이터가 모두 소모된 경우에도 통화를 방지하기 위한 추가 기능입니다.
8. 기본 페이지에 사용자 정의 후크가 있으면 전달 중인 매개변수의 상태를 생성합니다
9. 그런 다음 매개변수를 사용자 정의 후크에 전달하고 데이터를 검색합니다
10. 얻은 데이터 목록을 지도를 사용하여 렌더링한 후 표시합니다
11. 이제 끝에 도달하면 무한 스크롤을 적용해야 하므로 수신한 배열의 마지막 요소 데이터에 대해 간단히 참조를 추가하면 됩니다.
12. 이 참조는 매개변수가 이 마지막 요소가 되는 useCallback 함수와 동일합니다.
13. 다음으로 값이 기본적으로 null인 useRef를 생성합니다
14. 이제 로딩 상태인지 확인하겠습니다. 그렇다면 간단히 돌아가겠습니다
15. 다음으로 이 useRef 현재 값이 null인지 아닌지 확인하겠습니다. null이 아니면 간단히 이 관찰자의 연결을 끊습니다. 여기서의 아이디어는 관찰자가 매번 새로워야 한다는 것입니다. 매번 새로운 데이터를 갖게 되기 때문입니다
16. 이제 새로운 IntersectionObserver에 의해 콜백 함수의 새로운 관찰자.현재 값을 할당하겠습니다. IntersectionObserver API는 항목을 매개변수로 사용하여 콜백 함수를 반환합니다.
17. 이 항목은 기본적으로 페이지에 있는 마지막 요소의 값입니다. 페이지에서 이 항목과 상호 작용할 때의 조건이 필요합니다
18. 따라서 각 항목에 부울 값이 있습니다. 교차하는 중
19. 이것이 사실이라면 맞춤 후크의 매개변수를 변경하도록 하겠습니다. 그러면 API가 다시 호출되고 다시 렌더링됩니다
20. 마지막으로 콜백에 전달한 요소를 관찰해야 하므로 요소가 있으면 간단히 관찰합니다.

암호

CustomHook.jsx

import axios from "axios";
import { useEffect, useState } from "react";
import { API_URL } from "../common/constants";

export const useAuthorList = (limit, page) => {
  const [isLoading, setIsLoading] = useState(false);
  const [authorList, setAuthorList] = useState([]);
  const [error, setError] = useState("");
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      axios({
        method: "GET",
        url: API_URL,
        params: { limit: limit, page: page },
      })
        .then((res) => {
          setAuthorList(res.data.data);
          setHasMore(res.data.data.length === limit);
          setIsLoading(false);
        })
        .catch((e) => setError(e));
    }, 500);
  }, [limit, page]);

  return [isLoading, authorList, error, hasMore];
};

App.jsx

import React, { useCallback, useRef, useState } from "react";
import { useAuthorList } from "./hooks/useAuthorList";
import { AuthorQuotes } from "./components/AuthorQuotes";

const App = () => {
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(1);
  const [isLoading, authorList, error, hasMore] = useAuthorList(limit, page);

  const observer = useRef(null);
  const infiniteReference = useCallback(
    (element) => {
      if (isLoading) return;
      if (observer.current) {
        observer.current.disconnect();
      }

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setLimit((prev) => prev + 10);
        }
      });

      if (element) {
        observer.current.observe(element);
      }
    },
    [isLoading, hasMore]
  );

  return (
    <div className="author-quotes-list">
      {authorList.length > 0 &&
        authorList.map((authorQuotes, index) => {
          if (index + 1 === authorList.length) {
            return (
              <AuthorQuotes
                authorQuotes={authorQuotes}
                hasReference
                infiniteReference={infiniteReference}
              />
            );
          }
          return <AuthorQuotes authorQuotes={authorQuotes} />;
        })}
      {isLoading && <>Loading...</>}
    </div>
  );
};

export default App;

상수.js

export const API_URL = "https://api.javascripttutorial.net/v1/quotes/"

위 내용은 쉬운 단계로 무한 스크롤링을 마스터하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!