Page Nation 페이지 네이션, Infinite scroll 무한 스크롤

강다현·2022년 2월 9일
0

Page Nation (페이지 네이션)

여러 목록들을 페이지별로 나누어 정해진 값만큼 보이게하고 나머지 목록들은 다른 페이지에서 보이게끔 처리한 방식이라 할 수 있다. 게시판에서 다음페이지로 넘어가기 위한 숫자들이 나열 되어있는 부분을 page nation이라 한다.

const { data, refetch } = useQuery(FETCH_BOARDS, { variables: { page: 1 } })

const { data: dataBoardsCount } = useQuery(FETCH_BOARDS_COUNT);

const lastPage = Math.ceil(dataBoardsCount?.fetchBoardsCount / 10);
const [startPage, setStartPage] = useState(1);

const onClickPage = (event) => {
  props.refetch({ page: Number(event.target.id) });
  // 여기서의 중괄호는 variables를 의미
};

const onClickPrevPage = () => {
  if (startPage === 1) return;
  setStartPage((prev) => prev - 10);
  props.refetch({ page: startPage - 10 });
};

const onClickNextPage = () => {
  if (startPage + 10 > props.lastPage) return;
  setStartPage((prev) => prev + 10);
  props.refetch({ page: startPage + 10 });
};

아래는 데이터를 가져와 []배열 안에 10까지의 숫자를 넣어 map()으로 1~10까지의 페이지 네이션을 뿌려주는 방식으로 작성하였다

<div>
      <h1>페이지네이션 연습</h1>
      {data?.fetchBoards?.map((el) => (
        <div key={el._id}>
          {el.title} {el.writer}
        </div>
      ))}
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((el) => (
        <span key={el} onClick={onClickPage} id={String(el)}>
          {` ${el} `}
        </span>
      ))}
</div>

위의 방법은 []배열에 1~10까지 넣어주었다면 아래의 방법은 new Array()로 10의 자리까지 1로 채워 나열하여 index로 나타나게끔 처리하였다.

<div>
      <h1>페이지네이션 연습</h1>
      {data?.fetchBoards?.map((el) => (
        <div key={el._id}>
          {el.title} {el.writer}
        </div>
      ))}

      <span onClick={onClickPrevPage}>이전페이지</span>

      {new Array(10).fill(1).map((_, index) => (
        <span
          key={index + startPage}
          onClick={onClickPage}
          id={String(index + startPage)}
        >
          {` ${index + startPage} `}
        </span>
      ))}

      <span onClick={onClickNextPage}>다음페이지</span>
</div>

Infinite scroll (무한 스크롤)

스크롤이 페이지 하단에 도달하였을 때, 콘텐츠가 계속 로드되게끔 처리하는 방식이다. 네이버에서 검색을 했을 때 view탭에서 하단까지 스크롤시 무한 스크롤되는 모습을 볼 수 있다.

아래는 10개의 게시글이 된 후 스크롤이 하단에 닿으면 다음 10개의 게시글이 로드되게끔 처리되도록 작성한 코드이다.

import InfiniteScroll from "react-infinite-scroller";

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,
          ],
        }
      },
    })
  }
<InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={true}>
  {data?.fetchBoards?.map((el) => (
    <div key={el._id}>
      <span>
        {el.title} {el.writer}
      </span>
    </div>
  ))}
</InfiniteScroll>
profile
Hello🖐

0개의 댓글