여러 목록들을 페이지별로 나누어 정해진 값만큼 보이게하고 나머지 목록들은 다른 페이지에서 보이게끔 처리한 방식이라 할 수 있다. 게시판에서 다음페이지로 넘어가기 위한 숫자들이 나열 되어있는 부분을 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>
스크롤이 페이지 하단에 도달하였을 때, 콘텐츠가 계속 로드되게끔 처리하는 방식이다. 네이버에서 검색을 했을 때 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>