[React]KUCC 리액트 세션: 8. 무한스크롤(함수 컴포넌트 ver.)

import React, { useEffect, useState } from "react";

// KUCC 리액트 세션: 7.무한스크롤(클래스 컴포넌트 ver.)(https://infpidealistdeveloper.tistory.com/54)의 코드를

함수형 컴포넌트로 다시 짠 코드입니다.

const Allitem = () => {
  const [state, setState] = useState({
    productList: [], //상품의 배열
    items: 10, //요청하는 상품의 끝 인덱스
    preItems: 0,  //요청하는 상품의 첫 인덱스
  }); // state의 초기값 설정

 useEffect(() => {   //생명주기에서 componentDidMount, componentDidUpdate(mount, update)와 동일 기능
    getData(); //정보 요청
    window.addEventListener("scroll", infiniteScroll);  //scroll이 발생할때마다 infiniteScroll 함수 실행하는 이벤트 추가
    return () => {      //생명주기에서 componentWillUnmount와 동일 기능
      window.removeEventListener("scroll", infiniteScroll);  //scroll이 발생할때마다 infiniteScroll 함수 실행하는 이벤트 제거
    };
  }, []); //dependency 옵션으로 componentDidMount/componentDidUpdate 결정

: 없으면 매번 렌더링, [ ] : 한번만 렌더링, [어떤 조건 ex. user]  : 괄호 안 조건, 상수가 변할 때마다 실행 

  const getData = () => {
    const { preItems, items, productList } = state;

// state변수 안에 있는 각각 preItems, items, productList와 구조 분해 할당
    fetch("/Data/mock.json")
      .then((res) => res.json())
      .then((res) => {
        const result = res.data.slice(preItems, items); //data 10개씩 가져옴, 위에서 선언한 상수 활용
        setState({
          productList: [...productList, ...result], //state의 productList에 가져와서 가공한 result 추가
        });
      });
  };

  const infiniteScroll = () => { 
    const { documentElement, body } = document;

   // const documentElement = document.documentElement, const body = document.body
    const { items } = state;

    // document, state 안에 있는 동명 요소들과 구조 분해 할당 
    // 각 높이에 대한 설명은 https://velog.io/@hyounglee/TIL-56의 설명 참조
    const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight); 
    const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
    const clientHeight = documentElement.clientHeight;

     //우리가 원하는 스크롤이벤트 실행하는 부분입니다.
    if (scrollTop + clientHeight >= scrollHeight) {
      setState({
        preItems: items,
        items: items + 10,
      });
      getData();
   //result에 json화한(정리한) 정보를 productList에 ...result로 풀어서 추가한다 

   //result에 넣을 정보를 indexing할 preItems, items를 10씩 차이가 나도록 설정해

     getData할 때마다 10씩 정보를 불러오도록 한다 

   }
  };

  const { productList } = state;

//state의 productList를 가져온다
  return (
    <article className="Allitem">
      <div className="topInfo">
        <div className="totalItems">{productList}</div>

//마지막에 다시 productList를 불러와서 10씩 추가
      </div>
    </article>
  );
};

export default Allitem;

 

*React를 사용하다보면 과거에는 class를 더 많이 쓰고 요즘은 함수형 많이 써서 전환하는 방법 알고 있기!