20220128_TIL(2) : 무한 스크롤링

웹사이트를 사용하면서(특히 어플) 자주 보던 기능이 어떻게 구현되는 지 알게되니까 신기하기도하고 한편으로 복잡한 코드에 정신이 없었다.
직접 해보면서 무한 스크롤과 페이지네이션 차이점도 눈으로 익혀봤으니 블로그에 정리해두도록하고,

이걸로 구현해보고 싶은 화면에 적합한 기능이라 오늘 한 게시물 목록 무한 스크롤링에 대한 코드를 꼭 기억해둬야겠다. 연휴동안 그동안 배웠던 부분들 복습 + CSS를 해두면 무한 스크롤도 꼭 넣어야겠다.

//스크립트
const onLoadMore = () => {
    if (!data) return; //데이터없을때 실행 방지

    fetchMore({
      variables: {
        page: Math.ceil(data.fetchBoards.length / 10 + 1),
      }, // 요청할 페이지에 관한 코드

      updateQuery: (prev, { fetchMoreResult }) => {
        //이전(현재 표출 중인)데이터 + 다음 표출 데이터
        
        if (!fetchMoreResult.fetchBoards)
          return { fetchBoards: [...prev.fetchBoards] };
        	//다음 표출될 데이터 없을 경우 표출될 상황

        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
          	//이전 데이터와 다음 데이터 함께 표출(스프레드 연산자)
        };
      },
    });
  };

//HTML(JSX)
  return (
    <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={true}>
      {data?.fetchBoards?.map((el) => (
        <div key={el._id}>
          <div>
            <span>
              {el.title} {el.writer}
            </span>
          </div>
        </div>
      ))}
    </InfiniteScroll>
  );
}

👩🏻‍💻 오늘의 TIL ...

코드가 짜여지는 부분에서 코드를 줄이고 깔끔하게 정리하는 방법에 대해 확실히 배워가는 게 늘어날수록 관련해서 활용도가 엄청 높아졌다. 지난 과정에 빠진 게 없는 지 이번 연휴를 통해 다시 잡고 가보자.
⭐️ 특히 , 컴포넌트, 페이지 분리, 스프레드 연산자, state, props ... 기능 구현하는데 없어선 안될 ...