[TIL]9월 16일 PagiNation, event-bubbling

오늘은 pagination, event-bubbling 적용에 관해서 배웠다.

pagination 이란?

pagination이란 게시판에서 게시글을 보여줄때 나열해주는 방법이다.

크게 2가지의 방법이 있다.

1. 무한스크롤 방법
2. < 1 2 3 4 5 > 방법

무한스크롤 방법은 쉽게 생각하면 페이스북, 유튜브 처럼 스크롤을 내리면 계속해서 게시물이 나오는 방식이고
다른 방법은 한페이지에 나오는 게시물을 특정하고 페이지를 넘기면서 게시물이 나오는 방법이다.

오늘은 2번째 방법에 대해서 배웠다.

pagination 적용방법

pagination적용시에는 먼저 query설정이 필요하다.

지금까지 query에서 page를 적어주지 않았는데 page를 적어줘야 page를 나눌수 있다.

page의 타입을 적어준후 page 표시를 위한 쿼리를 추가적으로 작성한다.

fetchBoardsCount 란 쿼리로 해당 게시글들이 몇번째 page에 있는지 확인할수 있다.

이렇게 하면 쿼리 설정은 끝이 난다.

pagination할 대상이 게시글인지, 댓글인지, 페이지 표기 스타일인지, 무한스타일인지에 따라서 조금씩 달라진다.

이제 변수를 설정해야 한다.

먼저 startPage라는 state를 설정하고 초기값을 1로 설정한다.

이말은 처음페이지가 1페이지라는 말이다.

그 밑에 fetchBoards에 대한 data, refetch 쿼리를 작성해주고 variables로는 startPage의 state값을 넣어준다.

fetchBoardsCount에 대한 쿼리도 필요해 dataBoardsCount 라는 쿼리를 작성해 준다.

페이지 방식에는 마지막 페이지도 표현해 주어야 하는데 lastPage라는 변수를 만든 후 다음과 같이 넣어준다.

Math.ceil(dataBoardsCount?.fetchBoardsCount/10)

fetchBoardsCount를 10으로 나눈값을 올림해준다는 의미 이다.

이제 이전페이지, 다음페이지 클릭시 사용할 함수를 정의한다.

PrevPage, NextPage에 대한 함수를 정의한다.

prevPage는
startPage가 1이라면 바로 리턴하고, 그게 아니면 이전페이지에서 10을 뺀값을 계산한다는 의미이다.

NextPage는
startPage+10이 lastPage보다 크다면 바로 리턴하고, 그게 아니면 이전페이지에서 10을 더한값을 계산한다는 의미이다.

이제 쿼리,변수,함수등의 세팅이 끝났고 페이지에 적용시켜야 한다.

<div>
        {data?.fetchBoards.map((el) => (
          <div key={el.id}>{el.title}</div>
        ))}
      </div>
      <br />
      <span onClick={onClickPrevPage}>&#60;</span>
      {new Array(10).fill(1).map((_, index) => (
        <Page
          key={startPage + index}
          onClick={onClickPage}
          id={String(startPage + index)}
        >
          {startPage + index}
        </Page>
      ))}

      <span onClick={onClickNextPage}>&#62;</span>

map 함수를 사용해서 돌려준다.

map으로 감싼부분 안에 가져와야할 내용과 적용되어야할 key값에 대해서 설정한다.

그리고 직접적인 페이지가 포함되는 부분에는 10개의 배열을 새로 생성해주고 그값을 1로 채운다.
그부분을 다시 map함수로 돌려 알맞는 index를 넣어준다.

이부분은 아직 이해가 정확히 되지 않았는데 사용을 많이 해봐야할거 같다.

EventBubbling

eventBubbling은 간단하다.

게시글은 보통 이런형식으로 구성되는데 게시글을 클릭해 이동시키려면 어디에 onClick을 줘야하는지 애매할때가 많다.

전체 속성에 모두 onClick을 주면 이동하기는 하지만 상당히 번거로운 작업이다.

그때 eventBubbling을 사용한다.

  function onClickRow(event) {
    alert("클릭!");
    alert(event.currentTarget.id);
  }

이런식으로 event.currentTarget.id를 넣어준다.
event.target.id와 조금 다른방식이다.

이렇게 되면 해당 영역에 어디를 클릭해도 그 게시글로 이동할수 있다.