React 무한 스크롤 자습서: 라이브러리 및 라이브러리 없음

본 강좌는 https://www.devaradise.com/react-infinite-scroll-tutorial에 처음 발표되었다.
무한 스크롤은 현대 웹과 응용 프로그램 디자인 개념으로 사용자가 페이지를 아래로 스크롤할 때 내용을 계속 불러옵니다.그것은 페이지를 나누는 기능을 바꾸었다.
만약 대량의 데이터를 불러오고 사용자가 페이지 번호를 눌러서 더 많은 데이터를 보기를 원하지 않는다면 무한 스크롤을 실현하는 것이 적합하다.그것은 응용 프로그램의 사용자 체험을 향상시킬 수 있다.
개발자로서, 우리는 react 프로그램을 포함한 모든 응용 프로그램에서 무한 스크롤을 실현할 수 있다.React infinite scroll은 두 가지 방법으로 구현할 수 있는데, 하나는 라이브러리가 없는 상황에서 수동으로 구현하는 것이고, 다른 하나는 infinite scroll 라이브러리를 사용하는 것이다.
이 글은 라이브러리가 있든 없든react 프로젝트에서 무한 스크롤을 실현하는 방법을 보여 드리겠습니다.이 두 가지 방법은 각각 장단점이 있다.

이 강좌를 배우기 전에,create react app 샘플 파일을 사용하여react 프로그램을 초기화하는 방법을 알고 있는지 확인하십시오.기본적인 리얼리티 강좌를 여기서 설명하지 않으니까.나는 네가 이미 이해했다고 생각한다.
이 강좌에서, 우리는react 기능 구성 요소와 연결을 사용할 것이다.우리는 또한 react-lab를 사용하여 프레젠테이션 예시를 위탁 관리하고 this project architecture를 사용하여 프로젝트 파일을 관리한다.

라이브러리 없는 무한 스크롤을 어떻게 실현합니까

만약 당신의react 프로젝트를 가능한 한 경량급으로 하려면 라이브러리가 없는react 무한 스크롤을 실현하는 것이 가장 좋은 선택입니다.만약 네가 그것에 대해 맞춤형 제작을 하고 싶다면 이것도 가장 좋다.
개인적으로, 나는 이런 방법을 선택해서react 프로그램에서 무한 스크롤을 실현할 것이다.나는 그것이 쓸 코드와 논리가 매우 많다고 생각하지 않는다.
scroll 이벤트 감청기 하나, API 호출 서비스 하나, 데이터 불러오기, 논리적 함수 하나만 필요합니다.

어셈블리 생성하기

무한 스크롤을 실현한 사용자 목록 페이지를 만들 것입니다.그래서 우리는 그것을 실현하기 위해 구성 요소가 필요하다.

import React, { useState } from "react";

export default function InfiniteScrollNoLibrary() {

  const [userList, setUserList] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [noData, setNoData] = useState(false);

  return (
    <div>

      <div className="section">

        {userList.map((user, i) => 
          ( 
          <div className="box m-3 user" key={i}>
            <img src={user.avatar} alt={user.first_name}/>
            <div className="user-details">
              <strong>Email</strong>: {user.email}<br/> 
              <strong>First Name</strong>: {user.first_name}<br/> 
              <strong>Last Name</strong>: {user.last_name}<br/>
            </div>
          </div>
          )
        )}
        {loading ? <div className="text-center">loading data ...</div> : "" }
        {noData ? <div className="text-center">no data anymore ...</div> : "" }    
      </div>
    </div>
  );
}

나는 아직 업무 논리와 사건 탐지기를 함께 놓지 않았다.내가 먼저 상태와 표시를 설명할게.
수동으로 무한 스크롤을 수행하려면 최소 4가지 상태가 필요합니다.

userList API의 사용자 데이터 배열을 저장합니다.기본값은 빈 배열입니다.

page 로드할 사용자 목록 페이지를 계산합니다.이것은 목록에 같은 데이터를 불러오거나 추가하는 것을 피하는 데 도움이 된다.

loading API를 호출하면 로드 상태가 표시됩니다.

noData 데이터가 없는 상태를 제공하고 데이터가 없을 때 API 호출을 중지합니다.

위 코드에서 보듯이 userList 상태는 JSX 표시에서 map 순환을 사용합니다.A 마운트...loading 및 noData 상태에 true 값이 있을 때마다 "더 이상 데이터가 없습니다..."텍스트가 추가됩니다.

API 호출을 위한 서비스 만들기

구성 요소에 논리를 추가하기 전에 사용자 데이터를 호출하는 서비스를 만듭니다.
실제로 서비스를 만들지 않고도 어셈블리에서 API를 호출할 수 있습니다.하지만 개인적으로 구성 요소와 분리하는 것을 더 좋아합니다.너는 나의 react project structure article에서 원인을 읽을 수 있다.

import axios from 'axios';

export default {

  getList: async function(page) {
    try {
      let url;
      if(page!=null & page > 1) {
        url ="https://reqres.in/api/users?per_page=2&page="+page;
      } else {
        url = "https://reqres.in/api/users?per_page=2";
      }
      const response = await axios.get(url);
      return response.data;
    } catch(error) {
      throw error;
    }
  }
}

위의 getList 함수는 page 인자를 받아들여 삽입된 페이지 번호에 따라 URL 문자열을 동적으로 변경합니다.가상 데이터의 경우 사용자 APIresreq.in를 사용합니다.

구성 요소에 논리 추가

서비스를 만든 후에, 현재 우리는 하나의 구성 요소에서 그것과 논리를 사용할 것이다.아래의 전체 부품 코드를 보십시오.나중에 설명할게요.

import React, { useState, useEffect } from "react";
import UserService from 'services/UserService';

export default function InfiniteScrollNoLibrary() {

  const [userList, setUserList] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [noData, setNoData] = useState(false);

  window.onscroll = () => {
    if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
      if(!noData) {
        loadUserList(page);
      }
    }
  }

  useEffect(() => {
    loadUserList(page);
  }, []);

  const loadUserList = (page) => {
    setLoading(true);
    setTimeout(() => {
      UserService.getList(page)
        .then((res) => {
          const newPage = page + 1;
          const newList = userList.concat(res.data);
          setUserList(newList);
          setPage(newPage);
          if(res.data.length===0)
            setNoData(true);
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() =>{
          setLoading(false);
        })
      }
    ,1500);
  }

  return (
    <div>

      <div className="section">

        {userList.map((user, i) => 
          ( 
          <div className="box m-3 user" key={i}>
            <img src={user.avatar} alt={user.first_name}/>
            <div className="user-details">
              <strong>Email</strong>: {user.email}<br/> 
              <strong>First Name</strong>: {user.first_name}<br/> 
              <strong>Last Name</strong>: {user.last_name}<br/>
            </div>
          </div>
          )
        )}
        {loading ?  <div className="text-center">loading data ...</div> : "" }
        {noData ? <div className="text-center">no data anymore ...</div> : "" }    
      </div>
    </div>
  );
}

우선, 우리는 UserService 와 useEffect 갈고리를 구성 요소로 가져옵니다.나중에 API 호출 함수에서 사용할 것입니다.
상기 구성 요소 중 가장 중요한 코드는 11-17줄에 있습니다.

window.onscroll = () => {
    if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
      if(!noData) {
        loadUserList(page);
      }
    }
  }

이것은 사용자가 페이지를 스크롤할 때 감청하는 기능입니다.그 안에 '사용자가 페이지 밑으로 굴러가고 noData 상태가false라면 사용자 목록을 불러옵니다.' 라는 논리를 넣었다.
사용자가 페이지에 로그인하고 스크롤하지 않았을 때, 우리는 사용자 목록을 useEffect 갈고리에 불러옵니다.따라서 사용자 데이터는 여전히 불러옵니다.

useEffect(() => {
    loadUserList(page);
  }, []);

이제 loadUserList 함수를 봅시다.

const loadUserList = (page) => {
    setLoading(true);
    setTimeout(() => {
      UserService.getList(page)
        .then((res) => {
          const newList = userList.concat(res.data);
          setUserList(newList);

          const newPage = page + 1;
          setPage(newPage);

          if(res.data.length===0)
            setNoData(true);
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() =>{
          setLoading(false);
        })
      }
    ,1500);
  }

먼저 로드 상태를 true로 설정하여 로드...를 표시합니다.API를 호출할 때 텍스트를 보냅니다.불러오는 상태를 보기 위해 setTimeout 함수를 사용합니다.너는 코드에서 그것을 사용할 필요가 없다.
4행에서 UserService의 getList 함수를 호출하여 page 전달합니다.API 요청이 성공하면 API의 새 사용자 데이터가 현재 사용자 목록(6-7 줄)에 추가됩니다.
사용자가 다시 스크롤할 때 다음 API 호출을 위한 새 상태page를 설정해야 합니다.너는 9-10줄에서 볼 수 있다.
마지막으로, 우리는 조건을 만들어서 noData 상태를 설정합니다.API 응답이 빈 배열이면 로드할 데이터가 더 이상 없음을 나타냅니다.따라서 noData 상태를 true로 설정합니다.
API 요청에 오류가 발생하면 catch 섹션에서 캡처합니다.이 예에서 나는 단지 컨트롤러일 뿐이다.기록해 두다.finally 섹션에서 요청이 끝났기 때문에 loading 상태를 false로 다시 설정합니다.
이렇게이제 너 혼자 연습해도 돼.라이브러리가 없는 무한 스크롤의 실시간 프레젠테이션을 보려면 아래 링크를 클릭하십시오.
Live Demo

react Infinite scroller로 무한 스크롤을 수행하는 방법

react infinite scroll을 수동으로 실행하지 않으려면 라이브러리를 사용할 수 있습니다.많은 라이브러리에서 React 스크롤을 수행할 수 있습니다.
더 짧은 코드와 사용자 정의 옵션을 작성하려면 무한 스크롤 라이브러리를 사용하는 것이 좋습니다.대부분의 react infinite scroll 라이브러리는 내가 이전에 보여준 수동보다 더 많은 옵션과 기능을 실현합니다.
이 강좌에서 나는 react-infinite-scroller를 사용한다. 왜냐하면 그것은 간단하고 실현하기 쉽기 때문이다.더 이상 말할 필요 없이,react 프로젝트에서 그것을 어떻게 사용하는지 봅시다.

react infinite scroller 설치 및 가져오기

우선, 프로젝트에 react infinite scroller를 설치하려면 npm를 사용해야 합니다

npm i react-infinite-scroller

어셈블리에서 사용하려면 이렇게 가져오기만 하면 됩니다.

import InfiniteScroll from 'react-infinite-scroller'

어셈블리에서 InfiniteScroll 사용

이것은 완전한 부품 코드다.내가 아래에서 설명할게.

import React, { useState } from 'react'
import InfiniteScroll  from 'react-infinite-scroller'
import UserService from 'services/UserService';

export default function InfiniteScrollerWithReactInfiniteScroller() {

  const [userList, setUserList] = useState([]);
  const [hasMoreItems, setHasMoreItems] = useState(true);

  const loadUserList = (page) => {
    setTimeout(() => {
      UserService.getList(page)
      .then((res) => {
        const newList = userList.concat(res.data);
        setUserList(newList);

        if(res.data.length===0) {
          setHasMoreItems(false);
        } else {
          setHasMoreItems(true);
        }
      })
      .catch((err) => {
        console.log(err);
      })

    }, 1500)
  }

  return (
    <div>
      <div className="section">
        <InfiniteScroll
          threshold={0}
          pageStart={0}
          loadMore={loadUserList}
          hasMore={hasMoreItems}
          loader={<div className="text-center">loading data ...</div>}>

            {userList.map((user, i) => 
              ( 
              <div className="box m-3 user" key={i}>
                <img src={user.avatar} alt={user.first_name}/>
                <div className="user-details">
                  <strong>Email</strong>: {user.email}<br/> 
                  <strong>First Name</strong>: {user.first_name}<br/> 
                  <strong>Last Name</strong>: {user.last_name}<br/>
                </div>
              </div>
              )
            )}
        </InfiniteScroll>
        {hasMoreItems ? "" : <div className="text-center">no data anymore ...</div> }    
      </div>
    </div>
  )
}

보시다시피, 만약 우리가 라이브러리를 사용한다면, 우리는 작성할 수 있는 상태와 논리가 더욱 적을 것이다.우리는 사용자 데이터를 userList 상태로 저장하고 hasMoreItems가 <InfiniteScroll/>에 전달되기만 하면 된다.page와 loading 상태는 react-infinite-scroll에서 처리됩니다.loadUserList 함수에서 우리가 사용하는 사용자 서비스는 내가 이전에 수동으로 실현한 것과 같다.API 요청이 성공하면 새 사용자 목록(14-15 줄)과 설정hasMoreItems 상태(17-21 줄)를 설정하기만 하면 됩니다.
대부분의 논리는 <InfiniteScroll/>에 의해 처리되고 봉인userList되어야 한다.

<InfiniteScroll
   threshold={0}
   pageStart={0}
   loadMore={loadUserList}
   hasMore={hasMoreItems}
   loader={<div className="text-center">loading data ...</div>}>
      {userList.map((user, i) => 
         ( 
         <div className="box m-3 user" key={i}>
            <img src={user.avatar} alt={user.first_name}/>
            <div className="user-details">
               <strong>Email</strong>: {user.email}<br/> 
               <strong>First Name</strong>: {user.first_name}<br/> 
               <strong>Last Name</strong>: {user.last_name}<br/>
            </div>
         </div>
         )
      )}
</InfiniteScroll>

보시다시피 제가 위에서 사용한 InfiniteScroll에는 약간의 속성이 있습니다.다음은 해석이다.

threshold는 새 리스트를 로드할 페이지 아래쪽과 창 뷰포트 아래쪽 사이의 거리입니다. 기본값은 250입니다.나는 그것을 0으로 설정했다.

pageStart는 초기 목록에 대응하는 페이지 번호로 기본값0으로 첫 번째 불러오는 데 loadMore이 1에 호출된다는 것을 의미한다.

loadMore(pageToLoad) 사용자가 아래로 스크롤하고 새 목록을 불러올 때 호출됩니다.이 값은 함수여야 합니다.그것은 page의 숫자를 이 값에 전달할 것이다.

hasMore는 부울 값으로 더 많은 항목을 불러올 수 있는지 여부를 나타낸다.false이면 이벤트 탐지기를 삭제합니다.

loader는 항목을 로드할 때 표시할 로드 요소입니다. InfiniteSroll을 사용할 수 있습니다.setDefaultLoader,모든InfiniteScroll 구성 요소

에 대한 기본 로더 설정
추가 속성을 사용하려면 the documentation here을 참조하십시오.react infinite scoller를 통해 infinite scroll의 실시간 프레젠테이션을 보려면 아래 링크를 클릭하십시오.
Live Demo
그게 다야.나는 이것이 너에게 유용하길 바란다.
즐거운 코딩!