페이지네이션은
전체 데이터를 보여주는것이아니라 해당 버튼에맞게 일부 데이터를 보여주는것이다
ex ) 이전페이지, 다음페이지, 게시판 1페이지 ....
정의를 하면 이렇다.
백엔드에서 가지고 있는 데이터는 많고, 그데 데이터를 한 화면에 전부 보여줄 수 없을때.
일정 길이로 끊어서 전달을 한다
많은 웹사이트와 앱 어플리케이션에서 널리 사용되고있는 개념이라 친숙한 사람이 대부분일것이다
프론트엔드에서 해당값의 보여주는 양과 위치를 전달하면 , 백엔드에서 그에 해당하는 데이터를 내주는 방식으로 구현하게 된다.
Query
이과정에서 Query 라는 개념을 사용하게 되는데 쿼리는 해당 포인트에대해
요청을 보내주는 역할을 한다 limit값과 end값을 정리해주는 요청할수있는 기능이며
그런텍스트가 쿼리스트링(Query String) 으로 구분된다
자 이제 페이지네이션의 예를 보여주겠다
import { Page, PageWrapper } from "./Paginations01.styles";
import { IPaginations01UIProps } from "./Paginations01.types";
export default function Paginations01UI(props: IPaginations01UIProps) {
return (
<PageWrapper>
<Page onClick={props.onClickPrevPage}>{`<<`}</Page>
{new Array(10).fill(1).map(
(_, index) =>
props.startPage + index <= props.lastPage && (
<Page
key={props.startPage + index}
onClick={props.onClickPage}
id={String(props.startPage + index)}
isActive={props.startPage + index === props.activedPage}
>
{props.startPage + index}
</Page>
)
)}
<Page onClick={props.onClickNextPage}>{`>>`}</Page>
</PageWrapper>
);
}
해당데이터는 함수를 실행하는 바디컴포넌트이며 pagination에대한 end값과 default값을 정해줬을때 해당컴포넌트가 그대로 실행시켜주는 역할을 한다.
그리고 페이지네이션과 같이 백엔드에서 많은데이터를 보여줄 수 없는 상활일때 프론트는 무한스크롤 ㅡㄱ
infinite Scroll을 사용할수도 있다
Infinite Scroll이란?
Infinite Scroll은 화면에서 페이징 기법을 적용하기 위해 사용하는 방법 중 하나로 모든 데이터를 조회할 때까지 무한정 스크롤하는 기법을 의미합니다.
Infinite Scroll과 비교되는 가장 대표적인 것은 페이지네이션이 있습니다.
페이지네이션은 우리가 정말 친근하게 많이 보던 화면으로 게시판 같은 곳에 접속을 하게 되면 하단에 페이지 번호가 존재하는 페이징 기법입니다.
하지만 Infinite Scroll은 페이지네이션과 달리 페이지 번호가 따로 존재하지 않고 페이지네이션에서 다음 번호를 클릭해야 되는 동작을 단순히 계속 스크롤만 하는 것으로 대체해줄 수 있습니다.
그렇다고 Infinte Scroll은 페이지네이션의 상위 호환이다라고는 말할 수 없습니다.
Infinite Scroll보다 페이지네이션이 가지는 더 좋은 장점들도 있기 때문에 두 기법은 어떤 UI/UX를 사용자에게 보여줄 것인지에 따라 다르게 적용해주면 됩니다.
나 같은경우에는
https://www.npmjs.com/package/react-infinite-scroller
react-infinite-scroller 라는 라이브러리를 사용한다
우선 yarn 또는 npm을통해
react-infinite-scroller 을 인스톨을하고
<InfiniteScroll
pageStart={0}
loadMore={loadFunc}
hasMore={true || false}
loader={<div className="loader" key={0}>Loading ...</div>}
>
{items} // <-- This is the content you want to load
</InfiniteScroll>
아래 예시처럼 InfiniteScroll 을 import해서 사용하면된다
해당기능에 있는 특별한 API를 통해 사용은 어렵지않으며
본인이 보여주고싶은 컴포넌트를 {items} 에 넣어주면 해당페이지의 데이터가 일정 부분 넘었을때 무한스크롤기능이 동작하며 페이지가 밑으로 계속 렌더링되는걸 볼 수가 있다!!
마치며
데이터의 보여지는 부분은 무한한거같다... 네이버나 큰회사들은 데이터가 얼마나많을지..
데이터를 다루면 다룰수록 감이 안온다 ㄸㄷ
