무한스크롤 구현하기, React-virtualized(간단 설명)

무한스크롤

불러올 데이터가 많으면 프론트엔드에서는 무한스크롤을 사용하여 데이터를 조금씩 가져와야 한다. 그러기 위해서는 스크롤의 위치를 구하는 방법이 가장 중요하다.

스크롤 위치 구하기

  useEffect(() => {
    function onScroll() {
       window.scrollY + document.documentElement.clientHeight = document.documentElement.scrollHeight
       console.log(
         window.scrollY,
         document.documentElement.clientHeight,
         document.documentElement.scrollHeight
       );

    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

이벤트 리스너를 활용하여 스크롤 위치를 불러올 수 있다. useEffect에서 이벤트 리스너를 사용하면 반드시 return에서 removeEventListner을 해줘야 한다. 이것을 하지않으면 메모리에 이벤트가 계속 쌓인다.

 

window.scrollY: 현재 스크롤을 얼마나 내렸는지를 의미한다. 맨 아래가 아닌 맨 위를 기준으로 해서 스크롤이 맨 위에 있으면 0이다.

document.documentElement.clientHeight: 현재 브라우저에 보여지는 화면 길이

document.documentElement.scrollHeight: 스크롤을 다 펼친 총 길이(맨 위부터 아래까지 길이)

 

따라서 아래처럼 정리가 가능하다.

document.documentElement.scrollHeight = (window.scrollY + document.documentElement.clientHeight)

실제 사용하는 방법

  useEffect(() => {
      if (
        window.scrollY + document.documentElement.clientHeight >
        document.documentElement.scrollHeight - 300
      ) {
        if (hasMorePosts && !loadPostsLoading) {
          dispatch({
            type: LOAD_POSTS_REQUEST,
          });
        }
      }
    }
    window.addEventListener("scroll", onScroll);

    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, [hasMorePosts, loadPostsLoading]);

hasMorePosts: 더 불러올 데이터가 있는지

loadPostsLoading: 현재 데이터를 불러오고 있는 중인지

 

위 코드는 스크롤이 맨 아래에서 300px 미만인 위치로 오면 데이터를 추가적으로 불러오는 코드이다. 만약 loadPostsLoading를 체크하지 않으면 300px 미만에 있을때는 계속 데이터를 호출하여 불러오게 되어 무한 스크롤을 구현하는 의미가 없을 것이다.

불러올 기준점 설정(lastId)

sns 같은 서비스에서 게시글을 불러올 때 최근 게시글부터 불러온다. 

10, 9, 8, 7, 6, 5, 4, 3, 2, 1 이렇게 게시글들이 있고 최근꺼 기준으로 5개씩 불러올 수 있다. 효율적으로 불러오기 위해서는 lastId를 사용하는 것이 좋다. 따라서 맨 처음 5개씩 불러오면 lastId는 6이 된다. 이러면 중간에 게시글이 삭제되어도 lastId 이후 게시글을 가져오면 되기 때문에 문제가 발생하지 않는다.

---

React-virtualized

모바일 같은 경우는 메모리가 적다. 모바일로 sns을 보면 막상 게시글은 2~3개만 보이는데 불러와져 있는 게시글은 많으면 성능에 좋지 않을 것이다.

React-virtualized을 사용하면 화면에는 몇 개만 보여주고 나머지는 메모리에 저장해두는 방식을 사용한다.

 

-npm

https://www.npmjs.com/package/react-virtualized

react-virtualized

 

-출처

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의