[react] react-infinite-scroll-component 사용법 (ft. 무한 스크롤)

[react] react-infinite-scroll-component 사용법 (ft. 무한 스크롤)

react-infinite-scroll-component 

라이브러리 사용법입니다.

 

화면구현

 

react-infinite-scroll-component  기본 예제

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

const Component = () => {
    const [items, setItems] = useState(Array.from({ length: 40 }))

    const fetchData = () => {
        setTimeout(() => {
            setItems(items.concat(Array.from({ length: 50 })))
        }, 1500);
    };

    return (
        <>
          <InfiniteScroll
            dataLength={items.length} //반복되는 컴포넌트의 개수
            next={fetchData} //스크롤이 화면 맨 아래에 닿았을때 부르는 함수
            hasMore={true} ///추가 데이터가 있는지 여부
            loader={<h4>Loading...</h4>} //로딩바
           >
                {items.map((i, index) => (
                    <div key={index}>
                        div - #{index}
                    </div>
                ))}
            </InfiniteScroll>
        </>
    );
};

export default Component;

 

 

화면 구현(페이지 무한 스크롤)

 

포스팅 무한 스크롤 적용 예제

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useDispatch, useSelector } from "react-redux";
import { fetchAllPosts } from '../../../../features/mobile/cafe/cafeSlice';

const Component = () => {
    const dispatch = useDispatch()
	const { loginInfo } = useSelector((state) => state.commonApp)
	const [viewPosts, setViewPosts] = useState([]) //리스트 내 포스트
    const [morePosts, setMorePosts] = useState(true) //추가 포스트가 있는지 여부
    
    const onFetchMorePosts = () => { //추가 포스트 불러오기
        let params = { lastPostingId: viewPosts[viewPosts.length - 1]?.id, userId: loginInfo.userId }
        if (morePosts) { //추가 포스트가 true일 경우만 함수 실행
            dispatch(fetchAllPosts(params)) //redux-toolkit 사용
                .unwrap()
                .then(res => {
                    if (res.ok) {
                        setMorePosts(res.isExistNextPosting)//추가 포스트 여부 
                        setViewPosts(viewPosts.concat(res.postingList)) //추가 포스트 더하기
                    }
                })
                .catch(err => console.log(err))
        }
    }
    
    useEffect(() => {
    let params = { userId: loginInfo.userId }
    dispatch(fetchAllPosts(params)) //초기에 한번 불러오기
        .unwrap()
        .then(res => {
            if (res.ok) {
                setMorePosts(res.isExistNextPosting)
                setViewPosts([...viewPosts, ...res.postingList])
            }
        })
    return () => setValue('')
    // eslint-disable-next-line
	}, [dispatch, loginInfo.userId])

    return (
        <>
          <InfiniteScroll
            dataLength={viewPosts.length} 
            next={onFetchMorePosts} /
            hasMore={morePosts}
            loader={
                <div className='text-center mt-4'>
                    <h6 className='text-caption_1 text-gray_40'>loading...</h6>
                </div>
            }
        >
            <BoardLists datas={viewPosts} onOpenCafeRead={onOpenCafeRead} />
        </InfiniteScroll>
        </>
    );
};

export default Component;