[React] 페이지네이션 컴포넌트 (pagination component)

🎈다섯개가 기본인 페이지네이션 컴포넌트 구현하기

단어장 만들기 어플리케이션 작업 중, 페이지네이션 컴포넌트를 구현하는 작업이 필요해 구현해보았습니다.

Pagination.js

const Nav = styled.nav`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin: 2.6rem;
`

const StyledButton = styled(Button)`
  width: fit-content;
`

const Pagination = ({total, limit, page, setPage}) => {
	const numPages = Math.ceil(total / limit) // 총 몇개의 페이지가 나오는지
    const [currPage, setCurrPage] = useState(page)
    const btnLength = numPages < 5 ? numPages - 1 : 4 // 총 페이지 수가 5페이지가 넘을 경우 기본 5개
    let firstNum = currPage - (currPage % 5) + 1
    let lastNum = currPage - (currPage % 5) + 5
    
    return (
    	<Nav>
        	<Button 
            onClick={() => {setPage(page - 1); setCurrPage(page - 2)}}
            disabled={page === 1}>
            	<ChevronLeft/>
            </Button>
            <StyledButton
            	onClick={() => setPage(firstNum)}
                bgColor={page === firstNum ? "primary" : null}
                aria-current={page === firstNum ? "page" : null}>
            {firstNum}
            </StyledButton>
            {Array(btnLength)
            .fill()
            .map(_, i) => {
            	if (i <= 2) {
                	return (
                    	<StyledButton
                		key={`pagination-btn-${i + 1}`}
                		onClick={() => setPage(firstNum + i + 1)}
                		bgColor={page === firstNum + i + 1 ? "primary" : null}
                		aria-current={page === firstNum + i + 1 ? "page" : null}>
                    {firstNum + 1 + 1}
                    </StyledButton>
                    )}
                    else if (i >= 3) {
                    	return (
                        <StyledButton
                			key={`pagination-btn-${i + 1}`}
                			onClick={() => setPage(lastNum)}
                			bgColor={page === lastNum ? "primary" : null}
                			aria-current={page === lastNum ? "page" : null}>
                	{lastNum}
              			</StyledButton>)
                    }
            })
            }
            <Button>
            	<ChevronRight/>
            </Button>
        </Nav>
    )
}

export default Pagination

List.js

const List = () => {
	const list = useRecoilValue(list) // 리스트 예시

	const [limit, setLimit] = useState(10) // 몇 개씩 보여줄지
    const [page, setPage] = useState(1) // 현재 페이지
    const offset = (page - 1) * limit // 몇 번째꺼 까지

	return (
    	...
        <ul>
        	{list.slice(offset, offset + limit).map(item => (
            	<li key={`list-item-${item}`}>
                	{item.text}
            	</li>
            ))}
        </ul>
        
        <Pagination 
        	total={list.length}
            limit={limit}
            page={page}
            setPage={setPage}
        />
    )
}

export default List

감사합니다 :)