실전프로젝트 4주차 수요일

💡 react-infinite-scroll-component를 사용하기 전에 study

 

https://www.npmjs.com/package/react-infinite-scroll-component

react-infinite-scroll-component

 

1.using에서 코드 복사 후

<InfiniteScroll

  dataLength={items.length} //This is important field to render the next data

  next={fetchData}

  hasMore={true}

  loader={<h4>Loading...</h4>}

  endMessage={

    <p style={{ textAlign: 'center' }}>

      <b>Yay! You have seen it all</b>

    </p>

  }

  // below props only if you need pull down functionality

  refreshFunction={this.refresh}

  pullDownToRefresh

  pullDownToRefreshThreshold={50}

  pullDownToRefreshContent={

    <h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>

  }

  releaseToRefreshContent={

    <h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>

  }

>

  {items}

</InfiniteScroll>

2.below~삭제

<InfiniteScroll

  dataLength={items.length} //This is important field to render the next data

  next={fetchData}

  hasMore={true}

  loader={<h4>Loading...</h4>}

  endMessage={

    <p style={{ textAlign: 'center' }}>

      <b>Yay! You have seen it all</b>

    </p>

  }

 

>

  {items}

</InfiniteScroll>

 

3. const [items,setItems] = useState([])

 

4. const fetchData = () => {

 

}

 

5.useEffect(()=>{

//데이터 가져오기

const getComments = async () => {

    const res = await fetch(

       `https:에이피아이주소?page=1&limit=20` //처음20개 데이터 불러오기

);

 

     const data = await res.json(); //리스폰스를 const data에 저장

     setItems(data)//items는 현재 빈배열. 여기에 처음 20개 데이터를 set해주기

};

getCommetList();

},[])

 

console.log(items) => 하면 에러나지만 일단 콘솔에 어레이에 잘 들어왓는지 확인

6.에러잡기

<InfiniteScroll

  dataLength={items.length} //This is important field to render the next data

  next={fetchData}

  hasMore={true}

  loader={<h4>Loading...</h4>}

  endMessage={

    <p style={{ textAlign: 'center' }}>

      <b>Yay! You have seen it all</b>

    </p>

  }

 

>

  {items} ////🎈💡👻얘때매 에러

</InfiniteScroll>

 

=>

<InfiniteScroll

  dataLength={items.length} //This is important field to render the next data

  next={fetchData}

  hasMore={true}

  loader={<h4>Loading...</h4>}

  endMessage={

    <p style={{ textAlign: 'center' }}>

      <b>Yay! You have seen it all</b>

    </p>

  }

 

>

  {items.map((item)=>{

<div>key={item.id}</div>

<div>email:{item.email}<div>

})   ////items가 배열이기 때문에 이런식으로 맵을 돌려서 값을 추출해주기

    =>search_list맵돌리는거랑 똑같

</InfiniteScroll>

7.fetch 함수에 consol.log("hello")를 찍어보면

처음에 20개 배열이 콘솔에 찍히고, 스크롤을 하단으로 내렸을 때

hello가 찍힌다 => 제일 하단에 도달하면 fetch 가 다음 데이터 불러온다.

 

8. fetchComments 함수를 만들어준다.

fetch method를 사용해서 2번째 페이지를 가져올 것

const fetchComments = aync () => {

  const res = await fetch(

//page=2로 넣어주기(다음페이지 가져오기)

       `https:에이피아이주소?page=2&limit=20` //처음20개 데이터 불러오기

);

 

     const data = await res.json(); //리스폰스를 const data에 저장

     return data; //useEffect로 불러온 데이터 형식과 같이 작성해준다

};

}

9. 위에 작성한 함수를 fetchData함수 안에서 실행시켜준다.

const fetchData = async() =>{

   const commentsFormServer = await fetchComments();

}

이제 fetchComments는 스크롤 다운 될 때 불리게됨!

const fetchData = async() =>{

   const commentsFormServer = await fetchComments();

 

  setItems([...items, ...commentsFormServer])

//1페이지 데이터인 items와 2페이지 데이터인 commentsFormServer를 결합해서 set해주기

=> items에는 1,2페이지의 데이터가 모두 들어오게 된다.

}

 

10. 여기까지하고 콘솔에서 item찍어서 확인해보면

스크롤 내릴때 40번째까지 데이터가 잘 불려오고

에러가 찍힘 => 2번째 페이지를 한번 더 불러오고 있다.

fetchData함수가 2번째 페이지를 다시 불러오고 있음

데이터 가져오기 호출을 여러 번 방지하기 위해

두 번째 페이지를 로드한 후 속성을 true에서 false로 업데이트해야 함

=>새로운 state를 만들자(useState)

const [hasMore, setHasMore] = useState(true)

초기값이 true인 hasMore를 hasMore={hasMore}로 주입

 

11.이제 이 스테이트를 업데이트 해줘야 한다.

두번째 페이지를 로드하고 항목에서 선택하면 setHasMore(false)로 변경

const fetchData = async() =>{

   const commentsFormServer = await fetchComments();

 

  setItems([...items, ...commentsFormServer])

  setHasMore(false)

//호출된 데이터를 다시 가져오는 것을 방지합니다.(중복방지)

}

=>에러는 사라지고 스크롤이 끝난 멘트가 보인다!(페이지가 한번만 불려짐)

12. 40개(2페이지)까지는 가져왓는데 모든 데이터베이스 내용을 가져와야 한다.

=>다음 페이지를 불러올 새로운 state를 만들어 줘야 한다.

const [page,setPage]=useState(2)//초기값이 2인 state를 만들어주기

아까 작성했던 함수에서 page=2가 아니라 page=${page}로 해주기

초기값이 2이니까 두번째 페이지부터 불러올 것임

 

const fetchComments = aync () => {

  const res = await fetch(

       `https:에이피아이주소?page=${page}&limit=20`

);

 

     const data = await res.json();

     return data;

};

}

 

이제 여기서 페이지를 하나씩 증가시켜서 끝까지 불러오면 된다!

const fetchData = async() =>{

   const commentsFormServer = await fetchComments();

 

  setItems([...items, ...commentsFormServer])

  setHasMore(false)

  setpage(page+1)//여기

}

=>여기까지 하면 전과 결과가 같음(아직 page=2까지만 데이터 불러오고 끝남)

=>setHasMore를 false로 해놨기 때문!

=>여기에 조건문을 걸어줘야 한다.

 

const fetchData = async() =>{

   const commentsFormServer = await fetchComments();

 

  setItems([...items, ...commentsFormServer])

 

 if(commentsFormServer.length === 0 || commentsFormServer.length < 20){

   setHasMore(false)

}

 

  setpage(page+1)//여기

}

=>이렇게 하면 마지막 데이터까지 무한스크롤이 잘된다!

참고↓↓↓

youtube.com/watch?v=bBUOMy6Tugw