지난 글에 이어(Pagination comonent) 오늘은 Pagination component를 잘 관리하기 위한 custom hook에 대해서 소개하겠다 Pagination custom hook 반복되는 페이지 관련 상태관리 로직을 어떻게 처리하지? 입점사 프로젝트를 진행 중이었기 때문에 거의 모든 페이지에 페이지네이션이 들어갔다 이때마다 페이지 관련 상태 관리 로직이 생겨났고 🥲 하나 잘못된 로직이 있다면 다른 부분도 소스 검색해서 똑같이 수정해줘야 했다 비효율적인 일은 없애고자 페이지네이션 관련 로직을 한 곳에서 한 번에 관리하기 위해 custom hook으로 만들어주기로 결심했다 💪 전체 소스 src/hooks/usePageInfo.ts import { useRouter } from 'next..
페이지네이션
Pagination component 사용 시 아래와 같이 사용한다 const [currentPage, setCurrentPage] = useState(1); const [lastPage, setLastPage] = useState(0); // api 통신 후 값을 업데이트 해줌 const onChangePage = (newPage: number) => { setCurrentPage(newPage) } ... return ( ... ... ) Pagination component에서는 currentPage, lastPage, 페이지를 업데이트할 수 있는 함수를 전달받는다 currentPage와 lastPage가 업데이트될 때마다 화면에 보여줄 페이지 리스트를 계산해 줬다 👍 page가 1페이지인 경우 더..
