무한 스크롤

무한스크롤은 프론트엔드 개발자들이 다 한번씩은 구현해본 기능이다. 한번에 모든 데이터를 받아오는게 아니라

원하는 양의 데이터를 받아온 상태에서 일정 스크롤이벤트가 발생하면 다시 데이터를 요청해서 받아오는 기능이다

사용 이유

만약 초기 데이터가 1억개가 넘는다고 가정하자. 그랬을때 초기에 필요가 없음에도 한번에 이 데이터를 페칭

받아오면 너무 큰 리소스가 소모된다. 또한 사용자들도 오랜시간의 로딩상태를 경험하게 될 것이다.

이러한 문제를 해결하기위해 인피닛 스크롤을 구현한다.

원리

우선 유저가 스크롤을 내리면 어느 특정위치에 도달했을 때 다음 출력할 데이터를 요청한다.

이게 끝인 아주 단순한 기능이다. 아래의 예를 보도록하자.

const 무한스크롤 = () => {
	if(스크롤이 특정 y축에 도달 하였다){
		fetch(`limit=${몇개씩 받을지} pageset=${페이지+1}`)
	}
	return () => {
		scroll이벤트 종료
	}
}

위와 같은 방식으로 생각하면 된다.

결론

// hooks/useInfinity.ts

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import * as actions from '../store/modules/actions';

export const useInfinity = (pageSet: number, value: string) => {
  const dispatch = useDispatch();
  useEffect(() => {
    const handleScroll = () => {
      if (
        window.scrollY + document.documentElement.clientHeight >
        document.documentElement.scrollHeight - 1
      ) {
        pageSet++;
        if (pageSet < 4) dispatch(actions.getMainCard(50, pageSet, value));
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [value]);
};

scrollY ⇒ 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환한다.
clientHeight ⇒ 눈에 보이는 만큼의 높이를 구한다.
scrollHeight ⇒ 스크롤 시키지 않았을 때의 전체 높이를 구한다.

if문 안에서 필요한 조건은 특정 y축을 원한다. 위와 같이 원하는 위치를 정해주고 조건 만족시 쿼리 값을 바꿔주며

데이터 페칭 요청을 한다.