Pagination custom hook

지난 글에 이어(Pagination comonent)

오늘은 Pagination component를 잘 관리하기 위한 custom hook에 대해서 소개하겠다

 

Pagination custom hook

반복되는 페이지 관련 상태관리 로직을 어떻게 처리하지?

입점사 프로젝트를 진행 중이었기 때문에 거의 모든 페이지에 페이지네이션이 들어갔다

이때마다 페이지 관련 상태 관리 로직이 생겨났고 🥲

 

하나 잘못된 로직이 있다면 다른 부분도 소스 검색해서 똑같이 수정해줘야 했다

비효율적인 일은 없애고자 

페이지네이션 관련 로직을 한 곳에서 한 번에 관리하기 위해 custom hook으로 만들어주기로 결심했다 💪

 

전체 소스

src/hooks/usePageInfo.ts

import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { PER_PAGE_LIST } from 'src/components/filter/PerPageDropdown'
import { getParam } from 'src/utils/common'

export default function usePageInfo() {
  const { push, query } = useRouter()

  const [pageInfo, setPageInfo] = useState({
    totalCount: 0,
    currentPage: query.page ? Number(query.page) : 1,
    lastPage: 0,
    perPage: query.perPage ? Number(query.perPage) : PER_PAGE_LIST[0].value,
  })

  useEffect(() => {
    const handlePopState = () => {
      // "뒤로가기"인 경우
      const page = getParam('page')
      const perPage = getParam('perPage')

      setPageInfo({
        ...pageInfo,
        currentPage: page ? Number(page) : 1,
        perPage: perPage ? Number(perPage) : PER_PAGE_LIST[0].value,
      })
    }
    window.addEventListener('popstate', handlePopState)
    return () => window.removeEventListener('popstate', handlePopState)
  }, [])

  const onChangePage = (newPage: number) => {
    setPageInfo({ ...pageInfo, currentPage: newPage })

    push({
      query: {
        ...query,
        page: newPage,
      },
    })
  }

  const onChangePerPage = (newPerPage: number) => {
    setPageInfo({ ...pageInfo, currentPage: 1, perPage: newPerPage })

    push({
      query: {
        ...query,
        page: 1,
        perPage: newPerPage,
      },
    })
  }

  return { pageInfo, setPageInfo, onChangePage, onChangePerPage }
}

 

hooks 사용 시!

import usePageInfo from 'src/hooks/usePageInfo'

const TestPage = () => {
    const { pageInfo, setPageInfo, onChangePage, onChangePerPage } = usePageInfo()
    const { totalCount, currentPage, lastPage, perPage } = pageInfo
    
	return (
        ...
        <PerPageDropdown perPage={perPage} onSelect={onChangePerPage} />
        <Pagination currentPage={currentPage} lastPage={lastPage} onPageChange={onChangePage} />
        ...
    );
}

pagination hook을 사용하기 전과 비교해 확실히 보일러플레이트가 줄었고!(소스 줄 수도 줄었다 ㅎㅎ)

pagination 로직 관련된 내용도 수정하기 용이해졌다!