무한 스크롤(Infinite Scroll)

전체 데이터를 받아 FrontEnd에서 처리 하는 무한스크롤

const [dataList, setDataList] = useState([]);
const [hiddenDataList, setHiddenDataList] = useState([]); //랜더링하기 전 숨겨놓는 데이터(스크롤 할 때마다 -)
const [isLoading, setIsLoading] = useState(true); //무한스크롤 시 카드 로딩

• 무한스크롤을 위한 state 값

const fetchMoreData = async () => {
    //카드를 더 추가로 받아오는 함수

    if (hiddenDataList.length !== 0) {
      //안보여준 카드가 남아있을 때만
      setIsLoading(true);
      setTimeout(() => {
        setDataList([...dataList, ...hiddenDataList.slice(0, 8)]);
        setHiddenDataList(hiddenDataList.slice(8));
        setIsLoading(false);
      }, 700);
    }
  };

• 추가로 상품리스트를 더 가져오는 함수
  로딩 상태를 바꿔주는데 타이밍 이슈가 있어setTimeout 으로
  isLoading의 상태를 바뀔 수 있는 시간을 준다.
  추후 데이터를 DB에서 바로 받아오면 삭제도 가능 할 듯

  const infiniteScroll = useCallback(() => {
    //스크롤 높이 및 정도 감지하여, 조건 만족하면 fetchMoreData 함수 호출
    let scrollHeight = Math.max(
      document.documentElement.scrollHeight,
      document.body.scrollHeight
    );
    let scrollTop = Math.max(
      document.documentElement.scrollTop,
      document.body.scrollTop
    );
    let clientHeight = document.documentElement.clientHeight;
    scrollHeight -= 100;
    if (scrollTop + clientHeight >= scrollHeight && isLoading === false) {
      fetchMoreData();
    }
  }, [isLoading]);

• 스크롤이벤트를 감지 후 추가데이터를 가져와주는 함수 fetchMoreData를 호출 실행

  useEffect(() => {
    const getFetchData = () => {
      //페이지'최초' 랜더링때에만 작동
      setIsLoading(true);
      fetch('http://localhost:3000/data/MockData.json')
        .then(res => res.json())
        .then(data => {
          // setDataList(data); --> 이렇게 다 보여주는 대신에
          setDataList(data.slice(0, 8)); //최초에 8개만 보여주고
          setHiddenDataList(data.slice(8)); //보여준 8개 제외한 나머지만 추려서상태값에 저장
          setIsLoading(false);
        });
    };
    getFetchData();
  }, []);

• 최초 렌더링에서 dataList 에 상품리스트를 채워주는 곳
  맨 처음 상품 8개를 보여준다.

  useEffect(() => {
    window.addEventListener('scroll', infiniteScroll, true); // 스크롤 이벤트 등록
    return () => window.removeEventListener('scroll', infiniteScroll, true); //스크롤 이벤트 삭제(컴포넌트 언마운트시)
  }, [infiniteScroll]);

• 컴포넌트가 마운트 때 스크롤 이벤트 등록!
• 컴포넌트가 언마운트될 때 스크롤 이벤트 삭제!