페이지네이션

여러페이지를 보여주는 기능
게시글 목록이 많을때 한페이지당 10개씩 보이도록 하기

만들어보기

const onClickPage = (event:MouseEvent<HTMLSpanElement>): void => {
  void refetch({page: Number(event.currentTarget.id)})
}

  return (
    <div>
      {data?.getBoards?.map(el => (
        <div key={el?.id}>
        <span style={{margin:"15px", padding: "0px"}}>{el?.title}</span> 
        <span style={{margin:"15px"}}>{el?.writer}</span>
      </div>
      ))}
      {
        new Array(10).fill(1).map((_,index) => (
          <span key={index + 1} id={String(index + 1)} onClick={onClickPage}>{index + 1}</span>
        ))
      }
    </div>
  )
}

숫자를 누르면 해당 페이지로 출력하는 내용