[REACT] 무한 스크롤 (Infinite Scroll) 구현하기

 

라이브러리를 사용하지 않고 { useState, useCallback, useEffect, useRef } 를 사용해서 직접 구현해보기로 하였다 ! 🐥

사용하기만 해봤지 직접 구현하는데에는 너무 어렵고 이해도 잘 안되었지만 

정보도 많았고, 도움도 받아가며 이것 저것 새로 시도해보는 재미도있었다 -💙

 

🔆 구현 코드

import { useState, useCallback, useEffect, useRef } from "react";
import styled from "styled-components";

import { getPostList, postType } from "datas/postList";

const List = (): JSX.Element => {
  const [page, setPage] = useState<number>(1);
  const [posts, setPosts] = useState<postType[]>(getPostList(1));
  const ref = useRef<any>(null);

  const handleScroll = useCallback((): void => {
    const { clientHeight, scrollTop, scrollHeight } = ref.current;
    // 스크롤을 하면서 실행할 내용을 이곳에 추가합니다.

    if (clientHeight + scrollTop >= scrollHeight - 1) {
     // clientHeight 과 scrollTop를 더한 값이 scrollHeight - 1 보다 크다면, 가장 아래에 도달했다는 의미입니다.
      setPosts(posts.concat(getPostList(page + 1)));
      // 페이지에 따라서 불러온 배열을 posts 배열과 합쳐줍니다.
      setPage((prevPage: number) => prevPage + 1);
       // 페이지 state 변수의 값도 1씩 늘려줍니다.
    }
  }, [page, posts]);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll, true);
    // 스크롤이 발생할때마다 handleScroll 함수를 호출하도록 추가합니다.
    return () => {
      window.removeEventListener("scroll", handleScroll, true);
      // 해당 컴포넌트가 언마운트 될때, 스크롤 이벤트를 제거합니다.
    };
  }, [handleScroll]);

  return (
    <Container>
      <Content ref={ref}>
        {posts.map(({ id, img, contents }: postType) => (
          <Box key={id}>
            <img src={img} alt="" />
            <Text>{contents}</Text>
          </Box>
        ))}
      </Content>
    </Container>
  );
};

const Container = styled.div`
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #ebebeb;
  padding-bottom: 40px;
`;
const Content = styled.div`
  max-height: 500px;
  overflow: auto;
`;
const Box = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  img {
    border-radius: 5px;
    position: relative;
    left: 10px;
  }
`;
const Text = styled.div`
  width: 295px;
  height: 45px;
  margin: 10px 0;
  background: #ffffff;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  padding: 0 30px;
  display: flex;
  align-items: center;
`;

export default List;

 

export type postType = {
  id: number;
  page: number;
  contents: string;
  img: string;
};

export const getPostList = (page: number): postType[] => {
  return postList.filter((post: postType) => post.page === page);
  // 매개변수로 받은 페이지와 동일한 페이지 객체들만 return 해줍니다.
};

export const postList: postType[] = [
  {
    id: 0,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 1번째 글",
  },

  {
    id: 1,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 2번째 글",
  },

  {
    id: 2,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 3번째 글",
  },

  {
    id: 3,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 4번째 글",
  },

  {
    id: 4,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 5번째 글",
  },

  {
    id: 5,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 6번째 글",
  },

  {
    id: 6,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 7번째 글",
  },

  {
    id: 7,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 8번째 글",
  },

  {
    id: 8,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 9번째 글",
  },

  {
    id: 9,
    page: 1,
    img: "http://via.placeholder.com/60x45",
    contents: "안녕하세요 10번째 글",
  },
// ... 
]

 

구현은 해보았는데 너무 어려웠다 역쉬,,😮‍💨

 

그래도 결과 보면 뿌듯 -❤️