무한 스크롤이란?

데이타를 한번에 다 불러오지 않고, 일정량만 불러온 뒤 스크롤 하여 내릴 시 추가로 데이터를 더 가져 오는 기능

▶ 데이타를 한번에 불러오려면 첫 페이지에 로드가 많이 걸린다. 무한 스크롤을 이용해서 속도를 최적화 해보자.

1. 설치하기

npm install --save react-infinite-scroll-component

▶ 상기 명령어를 입력하여 설치한다.

2. 가져오기

import InfiniteScroll from 'react-infinite-scroll-component';

App.js파일에 상기 기능을 import 한다.

3. 템플릿 가져오기

'use client'
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import InfiniteScroll from 'react-infinite-scroll-component';

const App = () => {
  const [passengers, setPassengers] = useState([]);
  const [page, setPage] = useState(0);
  const [hasMore, setHasMore] = useState(true);

  const fetchPassengers = async () => {
    try {
      const response = await axios.get(`https://api.instantwebtools.net/v1/passenger?page=${page}&size=10`);
      const newPassengers = response.data.data;

      // 더 이상 데이터가 없으면 hasMore를 false로 설정
      if (newPassengers.length === 0) {
        setHasMore(false);
      } else {
        setPassengers((prevPassengers) => [...prevPassengers, ...newPassengers]);
        setPage((prevPage) => prevPage + 1);
      }
    } catch (error) {
      console.error('Error fetching passengers:', error);
    }
  };

  useEffect(() => {
    fetchPassengers();
  }, []);

  return (
    <div>
      <h1>Infinite Scroll with Passengers</h1>
      <InfiniteScroll
        dataLength={passengers.length}
        next={fetchPassengers}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
        endMessage={<p>All passengers have been loaded</p>}
      >
        {passengers.map((passenger, index) => (
          <div key={index} style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
            <p><strong>Name:</strong> {passenger.name}</p>
            <p><strong>Trips:</strong> {passenger.trips}</p>
            <p><strong>Airline:</strong> {passenger.airline[0].name}</p>
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default App;

▶ 상기의 InfiniteScroll Component를 삽입하면 된다.
▶ items.map으로 표현된 부분에 초기의 데이타를 넣어주고, fetchData()라는 함수를 정해서 추가로 가져올 함수를 정한다.(동적으로 코딩 필요)
▶ 끝까지 다 가져왔을 경우 endMessage를 띄워주며 noMore이란 변수를 지정해서 끝을 정해주면 됨.