인피니트 스크롤 구현하기

Infinite Scroll

에어비앤비 프로젝트 진행시 인피니트 스크롤 기능은 꼭해보고 싶었는데 프로젝트 기간 내에는 못해서 리팩토링시에 구현해보았다. 인피니트 스크롤은 데이터를 유저의 스크롤에 따라 추가적으로 불러오는 기능으로 많은 사이트에 구현되어 있는 기능이다. 인피니트 스크롤을 리액트에서 구현하기 위해서는 외부 라이브러리를 사용할 수도 있지만 직접 스크롤을 컴포넌트에 추가하여 구현하는 방법을 사용하였다.

데이터 불러오기

인피니트 스크롤 기능을 구현하기 위해서는 계속적으로 데이터를 받아오는 것이 필요하여 페이지네이션 기능이 가능한 외부 데이터를 사용하였다

(https://jsonplaceholder.typicode.com/comments)

기존에는 데이터를 불러오기 위해 fetch 함수를 사용하였는데 이번에는 axios 함수를 사용하였다. 리액트에서 axios는 외부라이브러리여서 사용전 설치를 해줘야한다.

//설치 명령어
npm i axios

//컴포넌트에 임포트하기
import axios from 'axios';

const fetchData = async currentPostId => {
    try {
      const res = await axios(
        `https://jsonplaceholder.typicode.com/comments?postId=${currentPostId}`
      );
      const data = await res.data;
      setReviewData([...reviewData, ...data]);
    } catch (error) {
      alert(error);
    }
  };

상태값 관리

스크롤 반응에 따라서 데이터를 추가적으로 불러오기 위해서 위의 API는 쿼리 파라미터 기능을 제공하므로 그것을 이용해서 현재 page와 데이터를 담을 빈배열을 초기 상태로 설정하였다.

const [currentPostId, setCurrentPostId] = useState(1);
  const [searchVal, setSearchVal] = useState('');

스크롤 기능

인피니트 스크롤은 스크롤이 현재 데이터가 불러져온 마지막 위치에 닿았을 때 추가적으로 데이터를 불러와야 하므로 scrollHeight, scrollTop, clientHeight 속성을 사용하였다.

• scrollHeight: 스크롤이 적용되지 않은 화면의 전체 높이를 구한다
• scrollTop: 스크롤되어 올라간 만큼의 높이를 구한다.
• clientHeight: 현재 유저에게 보여지는 만큼의 높이를 구한다.

위의 세 속성을 사용했을때, 현재 로드된 데이터의 스크롤을 마지막까지 내린 위치는 scrollTop 과clientHeight 의 합이 scrollHeight 보다 크거나 작을때가 된다.

const scrollHandler = evt => {
//현재 스크롤이 일어나는 이벤트의 속성값을 구해준다
    const scrollHeight = evt.nativeEvent.srcElement.scrollHeight;
    const scrollTop = evt.nativeEvent.srcElement.scrollTop;
    const clientHeight = evt.nativeEvent.srcElement.clientHeight;

//조건이 만족될때 현재 데이터의 페이지 상태값이 추가되고 추가된 값을 
//인자로 받아서 데이터를 더 불러온다.
    if (scrollTop + clientHeight >= scrollHeight) {
      setCurrentPostId(prev => prev + 1);
      fetchData(currentPostId);
    }
  };

//componentDidUpdate 라이프사이클을 사용하여 데이터를 추가로 불러온다.
useEffect(() => {
    fetchData(currentPostId);
  }, [currentPostId]);

레퍼런스

How to Implement Infinite Scrolling with React.js