infiniteScroll.js

import React, { useState, useEffect } from 'react';
import {PageItem} from "./recruit/recruitList";
import InfiniteScrollStyles from './infiniteScroll.module.css'
import {ChannelItem} from "./channel/channelList";

function InfiniteScroll(props){
    const [items, setItems] = useState([]);
    const [minId, setMinId] = useState(0);
    const [minDate, setMinDate] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [search, setSearch] =useState([]);

    const page = props.pagename;
    const queryString1 = props.queryString1;
    const queryString2 = props.queryString2;
    const min = props.min;
    
    const initialFetchData = async ()=>{
        try{
            const response = await fetch(`/api/${page}${queryString1}`);
            const jsonData = await response.json();
            if(page==='channels'){
                setMinDate(jsonData['minDate']);
                const newData = jsonData[page];
                if (newData.length > 0) {
                  const components = [];
                  for (let i = 0; i < newData.length; i += 2) {
                    const component = (
                     
                        <div className={InfiniteScrollStyles.itemContainer}>
                        <div className={InfiniteScrollStyles.firstitem}>
                        <ChannelItem props={newData[i]} /></div>
                        <div className={InfiniteScrollStyles.seconditem}>{i + 1 < newData.length && <ChannelItem props={newData[i + 1]} />}</div>
                        </div>
                      
                    );
                    components.push(component);
                  }
                  setItems((prevItem) => [...prevItem, ...components]);
                }
              }else if(page === 'recruits'){
                setMinId(jsonData['minId']);
                const newData = jsonData[page];
                if(newData.length > 0) {    
                    const components = newData.map((item) => (
                        <PageItem data={item}/>
                    ));
                    
                    setItems(prevItem => [...prevItem, ...components]);
                }
            }  else{
                setMinId(jsonData['minId']);
                const newData = jsonData['recruits'];
                if(newData.length > 0) {    
                    const components = newData.map((item) => (
                        <PageItem data={item}/>
                    ));
    
                    setSearch([]);
                    setSearch(prevItem => [...prevItem, ...components]);
                }
            }

        } catch(error){
            console.log('Error during fetch:', error);
        }
    }

    useEffect(() => {
        initialFetchData(); // 최초 렌더링 시에 데이터 가져오기