웹사이트를 구현하면서 여러 페이지로 이동해야할 때 Router를 쓰지않고 페이지네이션(콘텐츠를 웹사이트 내에서 또 다른 페이지로 분리)이라는 새로운 기능에 대해 배웠다.
게시물 목록을 불러올 때 수많은 게시물을 한 페이지에 보여줄 수 없다. 이럴때 숫자 형식으로 리스트를 만들어두고 해당 페이지로 이동하게 할 수 있다.
//코드와 함께보기
export default function PageNationSample() {
const [pageNumber, setPageNumber] = useState(1);
const { data, refetch } = useQuery(FETCH_BOARDS, {
variables: { page: 1 },
}); // - (1)
const {data : dataBoardsCount } = useQuery(FETCHBOARDS)
const LastPage = Math.ceil(dataBoardsCount.fetchBoardsCount / 10); // -(4)
const onClickPage = (event) => {
refetch({ page: Number(event.target.id) });
}; // - (3)
const onClickPrevPage = () => {
setPageNumber((prev) => prev - 10);
if(pageNumber === 1) return;
};
const onClickNextPage = () => {
if(LastPage =< 10 + pageNumber) return; // -(5)
setPageNumber((prev) => prev + 10);
};
return (
<div> // - (2)
{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 + pageNumber}
onClick={onClickPage}
id={String(index + pageNumber)}
>
{` ${index + pageNumber} - `}
</span>
))}
<span onClick={onClickNextPage}>다음 페이지</span>
</div>
);
}(1) - API로 가져온 목록에 대한 변수 설정
(2) - 게시물 수가 많아질수록 페이지 수를 다 적어줄 수 없기 때문에 새로운 배열을 만들고 .map()으로 반복해서 표출해준다.
(3) - 페이지네이션을 위해 클릭하면 이동하는 함수 만들어준다.
클릭했을때마다 해당하는 게시물을 볼 수 있도록 데이터를 refetch해준다.
(4) - 게시물 수에 따라 표출되는 페이지네이션 제한하기위해 게시물 수 조회 및 마지막 페이지에 대한 변수 설정 ⭐️ 주의
다음 페이지로 이동하기 위한 함수를 설정하는 부분에서 불러온 데이터에 대한 변수를 세로 설정하고 대입하는 과정에서 혼자 숫자를 넣어보면서 이해했다..🥲
(5) - 마지막 페이지보다 조회될 페이지가 크면 다음으로 이동하는 함수 종료
🧑🏼🔬 Lifting-state 부모 컴포넌트로 데이터를 이동시켜보자.
페이지네이션을 다른 컴포넌트에도 사용하고 싶을때,
혹은 자식 요소에 있는 컴포넌트를 다른 컴포넌트로 옮겨 사용하고 싶을때,
공통 부모 컴포넌트에 state를 옮겨 props로 해당 데이터를 받아와서 사용하면 된다. ** State Lifting 관련 참고 👉🏻 React 공식 사이트
state 분리하고 props로 연결하는 방식인데,
pagination을 다른 게시물에도 넣고 싶다면 동일한 컴포넌트를 관련 기능은 해당 게시물 index.tsx에 넣어두면 그 변수를 props로 받아와서 사용할 수 있으면서 동시에 해당 boards 파일도 부모 컴포넌트와 연결이 되어있는 상태기 때문에 페이지네이션을 클릭했을때 boards 파일의 게시물 목록도 같이 기능이 구현되는 것이다.
state는 단방향(부모->자식)으로 데이터를 처리하기 때문에 자식 -> 부모로 데이터를 보내줄 수 없다. 그래서 부모 컴포넌트에 기능을 넣고 여러 자식 컴포넌트로 데이터를 넘겨주면 된다.
pagination.tsx에 모든 기능을 넣어두지 않는 이유 ?
해당 페이지네이션이 게시물 조회 뿐만 아니라 다른 컴포넌트에서도 사용하려면 굳이 한 파일에 기능을 넣어둘 필요가 없다. 관련 index.tsx(부모 컴포넌트) 파일에 해당 기능을 넣고 다른 파일들과 props 로 연결만 해주면 되기 때문 !
👩🏻💻 오늘의 TIL ...
- 데이터를 보여주는 다양한 방식 중 페이지네이션 / 무한 스크롤이 있다고 한다. 두 가지 차이점을 정리하고 링크 업데이트해두자.
- 파일을 연결하고 props로 연결하는 것이 습관처럼 익숙해져야할 것 같다.
⭐️ 레이아웃이나 container/presenter 형식처럼 작업을 하면서 파일 연결은 필수적으로 진행해야할 당연한 과정 !!
