무한 스크롤 적용

칵테일 레시피 공유 프로젝트를 제작하면서

칵테일 레시피 목록을 보여주는 방법은 무한 스크롤로 적용하게되었다

목록을 보여주기 위한 방법에는 페이지를 나누는 페이지 네이션과 무한 스크롤 등의 방법이 있었고,

무한 스크롤이 사용자 경험에 더 긍정적이라고 생각하여 무한 스크롤로 적용하게 되었다

무한 스크롤 적용

맞는 방법인지는 모르겠지만, 구글링을 통해 얻은 정보를 통해 구현하게 되었다.

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  });

useEffect hook을 통해 해당 컴포넌트가 렌더링되면 스크롤을 감지한다

  const handleScroll = async () => {
    if (
      window.innerHeight + window.scrollY + 100 >= document.body.offsetHeight &&
      !isEnd
    ) {
      setAddFetching(true);
      const data = await requestList(count + 12, query);
      if (data.length !== 0) {
        dispatch(addArticleList(data));
        setCount(count + 12);
      } else {
        setIsEnd(true);
      }
      setAddFetching(false);
    }
  };

스크롤의 밑 부분(window.innerHeight + window.scrollY)이 페이지의 바닥에 닿으면 추가적인 fetching을 하도록 구현하였다

count는 데이터를 받아올 첫 index를 기록하며, fetching시 서버에 함께 보내도록 하였다

그렇게 되면 서버는 count부터 12개의 게시물을 보내준다

받아온 데이터가 있다면 다음 받아올 게시물을 위해 count를 12 늘려주었고, isEnd가 true라면 count를 늘리지 않는다.

이때, isEnd는 서버를 통해 받은 데이터의 길이가 0이면 isEnd state를 변경하여 더 이상 받아올 데이터가 없음을 구분하도록 하였다

setAddFetching은 로딩 인디케이터를 보여주기 위해 fetch의 시작점과 끝지점에서 변경되도록 작성하였다.

의문점

• 게시물을 조회한 후 뒤로가기나 목록버튼을 클릭하여 되돌아오면, 다시 처음부터 스크롤을 내려야 하는 단점이 있는 듯하다. 이것은 무한 스크롤의 단점으로 봐야할까, 추가적인 코딩으로 막을 수 있는 문제일까..?
• 보통 footer를 보기 힘들다고들 하는데, 이는 어쩔 수 없는 듯 하다..? 현재 프로젝트는 게시물의 수가 적어, 게시물 목록을 끝까지 다 내리면, 더 이상 표시할 게시글이 없다는 멘트와 함께 footer를 볼 수 있긴하다
  
• 위 문제를 해결하기 위해서는 더보기 버튼을 만들면 될 듯!