[React] 무한스크롤 구현하기

💡 https://velog.io/@yiyb0603/React에서-무한스크롤-구현하기-8rdmbhtj

 

무한스크롤 구현모습

위의 사이트를 따라하며 쓴 글입니다.

1. 파일 생성 및 코드 작성하기

임의의 폴더를 만들어 파일을 생성한다. InfiniteScroll.js을 만들어준다.

InfiniteScroll.js

import React, { useState, useCallback, useEffect } from 'react';
import { getPostList } from './postList';

const InfiniteScroll = () => {
  const [page, setPage] = useState(1);
	const [posts, setPosts] = useState(getPostList(1));

  return (
    <Container>
      {
      posts.map((post, idx) => (
        <PostItem key={idx}>{post.contents}</PostItem>
      ))
    }
    </Container>
  );
};

export default InfiniteScroll;

반응형

• page : 초기값을 1로 준다. 그리고 페이지의 수가 올라갈 때마다 다른 내용들이 보이게 한다.
• posts : 아래 만든 getPostList를 가져와 페이지의 숫자와 일치하는 contents만 보이게 하기 위한 변수이다.

postList.js

임의의 데이터를 만들어준다.

export const getPostList = (page) => {
  return postList.filter((post) => post.page === page);
};

export const postList = [
  {
    page: 1,
    contents: '안녕하세요 1번째 글',
  },
  {
    page: 1,
    contents: '안녕하세요 2번째 글',
  },
  {
    page: 1,
    contents: '안녕하세요 3번째 글',
  },
  {
    page: 2,
    contents: '안녕하세요 4번째 글',
  },
  {
    page: 2,
    contents: '안녕하세요 5번째 글',
  },
  {
    page: 2,
    contents: '안녕하세요 6번째 글',
  },
  {
    page: 3,
    contents: '안녕하세요 7번째 글',
  },
  {
    page: 3,
    contents: '안녕하세요 8번째 글',
  },
  {
    page: 3,
    contents: '안녕하세요 9번째 글',
  },
  {
    page: 4,
    contents: '안녕하세요 10번째 글',
  },
];

2. 이벤트 구현하기

InfiniteScroll.js

const handleScroll = useCallback(() => {
  const { innerHeight } = window;
  const { scrollHeight } = document.body;
  const { scrollTop } = document.documentElement;

  if (Math.round(scrollTop + innerHeight) >= scrollHeight) {
    setPosts(posts.concat(getPostList(page + 1)));
    setPage((prevPage) => prevPage + 1);
  }
}, [page, posts]);

• innerHeight : 브라우저창 내용의 크기(스크롤 미포함)
• scrollHeight : 브라우저 내용의 크기 + 스크롤 포함
• scrollTop : 스크롤 위치
• (scrollTop + innerHeight) >= scrollHeight : scrollTop과 innerHeight를 더한 값이 scrollHeight보다 크다면, 가장 아래에 도달했다는 의미이다.
• setPosts : 페이지와 contents를 합친다.
• setPage : 페이지의 수를 늘려준다.

useEffect(() => {
  window.addEventListener('scroll', handleScroll, true);
  
  return () => {
    window.removeEventListener('scroll', handleScroll, true);
  };
}, [handleScroll]);

• 스크롤이 발생할때마다 handleScroll 함수를 호출하도록 추가한다.
• 해당 컴포넌트가 언마운트 될때, 스크롤 이벤트를 제거한다.

실행화면

실행화면