[Main-project] 지식 정리_Infinite scroll

📍 무한 스크롤 구현

: 무한 스크롤은 여러가지 방법이 있지만, 나는 react-infinite-scroll-component를 사용해서 구현을 했다

react-infinite-scroll-component

: React의 무한 스크롤을 구현하는데 사용되는 라이브러리

구현 방법

• 라이브러리 설치 : npm install react-infinite-scroll-component
• 컴포넌트 가져오기 : import InfiniteScroll from 'react-infinite-scroll-component';
• InfiniteScroll 컴포넌트 사용
  [예시]

<InfiniteScroll
  dataLength={items.length} // 현재 화면에 보이는 컨텐츠 아이템의 개수
  next={fetchMoreData} // 스크롤 이벤트가 감지됐을때 호출되는 함수
  hasMore={true} // 추가 데이터 유/무->true면 추가 데이터 로드됨
  loader={<h4>Loading...</h4>} // 추가 데이터 로드시 로딩상태 표시
>
  {/* 스크롤 가능한 컨텐츠 */}
  {items.map((item, index) => (
    <div key={index}>{item}</div>
  ))}
</InfiniteScroll>

코드에 적용하기

['next' 함수]

  const perscroll = 10

  const getInvitations = (perscroll) => {
    if (invitation.length === 0) return; // 로딩 중이거나 초대장 데이터가 없으면 함수를 종료합니다.
    const prevInvitations = [...currentInvitations];
    // invitation 배열에서 현재 페이지에 해당하는 데이터를 슬라이스합니다.
    // 예를 들어 currentPage = 2이면,
    // invitation.slice(10, 20)이 되는거여서 데이터를 10-20사이에 있는것만 보여준다
    const newInvitations = invitation.slice(
      (currentPage - 1) * perscroll,
      currentPage * perscroll,
    );

    // 현재 보이는 초대장 데이터에 새로운 데이터를 추가합니다.
    setCurrentInvitations([...prevInvitations, ...newInvitations]);

    // 다음 페이지로 현재 페이지를 업데이트합니다.
    setCurrentPage(currentPage + 1);
  };

  // 처음 렌더링 될떄만 실행이됨 (초대장 데이터를 가지고옴)
  useEffect(() => {
    fetchAllInvitaion();
  }, []);

  // 초대장 데이터가 로드중에 있고 페이지가 1보다 크다면 추가 데이터를 가져오는 역할을 함
  // 초반 로딩시에만 데이터를 가져오고 스크롤하여 페이지를 업데이트할때 추가 데이터를 가져옴
  useEffect(() => {
    // 초대장이 아무것도 없게 되면 함수 종료
    if (invitation.length === 0) return;
    // 초대장 데이터가 더 있게 되고
    // 현재 페이지가 1 초과인 경우에만(이미 페이지가 더 있는경우)추가 데이터를 가져오는 함수 실행
    if (currentPage > 1) return;
    getInvitations(PER_SCROLL);
  }, [invitation]);

[InfiniteScroll 컴포넌트]

        <InfiniteScroll
          dataLength={currentInvitations.length} // 현재 화면에 보이는 초대장 데이터의 개수
          next={() => getInvitations(PER_SCROLL)} // 스크롤 이벤트가 감지됐을때 실행되는 함수
          hasMore={true} // 추가 데이터의 여부
          loader={isLoading ? <h4>Loading</h4> : null} // 데이터 불러올때 로딩 상태
          className="invitation-container"
          scrollThreshold={1} // 스크롤 이벤트를 얼마나 민감하게 감지할지를 나타냄 (0-1사이의 비율로 표현)
        >
          {currentInvitations.map((item) => (
            <Link
              key={item.boardId}
              to={`/boards/${item.boardId}`}
              className="invitation-item"
            >
              <img src={item.imageUrl} alt="초대장 이미지" />
            </Link>
          ))}
        </InfiniteScroll>