Pagination

원하는 데이터를 테이블로 만들고 이를 페이지 선택하고자 했다.

Table Component

const Table = memo(({children, ...props}: any) => { 
    return <StyledTable>{children}</StyledTable>;
});

export default Table; 

1. typescrips: 타입 설정을 신경쓰자.
2. memo함수: 렌더링 결과를 기억하려 불필요한 재렌더링을 줄여 속도를 향상시킨다.
   2-1. memo 함수는 언제 쓰는 것이 좋을지 생각해보자.

   props의 변화가 없을 때
   2-2. 클래스 기반 함수에는 사용하지말자.

데이터 불러오기

//list.tsx

const MyList = () => {
    const [posts, setPosts] = useState([]);
    const [curPage, setCurPage] = useState(1);
    const [postPerPage] = useState(10);

    const getGames = async () => {
        await axios.get('http://localhost:4000/data')
            .then(res => {
                setPosts(res.data)
            })
            .catch(error => {
                console.error()
            })
    };
  
    useEffect(() => {
        getGames();
    }, []);

1. curPage를 통해 현재 페이지를 설정 'useState(1)을 통해 1부터 시작'
2. postPerPage를 통해 한 페이지에 몇 개의 post가 입력될 지 지정 'useState(10)을 통해 10개로 지정'
3. 데이터 불러오기를 성공할 경우 setPosts에 값을 넣어 배열화 'useState'
4. useEffect는 렌더링을 하는 함수(추후 자세히)

페이지 나누기

const indexOfLastPost = curPage * postPerPage // 1*10 = 10번 포스트
const indexOfFirstPost = indexOfLastPost - postPerPage // 10-10 = 0번 포스트
const curPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

1. 한 페이지에 나올 마지막 포스트와 처음 등장할 포스트를 구한다.
2. slice 함수를 이용하려 현재 화면에 나올 포스트를 정의한다.
   2-1 slice({number1}, {number2})는 posts 배열 안의 (number1)부터 (number2)-1 배열을 복사하여 다시 배열을 만든다.

클릭

const Paginate = (pageNum: any) => setCurPage(pageNum);

Paginate와 pageNum은 다른 컴퍼넌트에서 가져오기에 아래에서 다룬다.

페이지 이동 nav

return(
  <>
  <div>
  	{curPosts.map((res: {id: any, name: any}) => {
  		return(
          <div>{res.name}</div>
          )
  </div>
  <Pagination 
  	postPerPage = {postPerPage}
  	tatalPerPage = {posts.length}
    pagination = {Pagination} />
  </>     
 //list.tsx 끝

Pagination

//pagination.tsx
const Pagination = ({postPerPage, totalPosts, paginate}: any) => {
  const pageNumbers = [];
  for (let i = 1; 1 <= Math.ceil(totalPosts / postPerPage); i++) {
    pageNumbers.push(i);

1. Pagination 정의 {postPerPage, totalPosts, paginate}
2. pageNumbers 배열화
3. ceil()는 소수점 아래를 올림
4. i의 변화에 따라 pageNumbers에 i를 입력

onClick

<nav>
  <ul>
   {pageNumbers.map(num => <li><a onClick={() => paginate(num) href="#!">{num}</a></li>)}
  </ul>
</nav>