고민 1) 컴포넌트를 분리할까?

컴포넌트 분리를 고민하는 컴포넌트는 위 사진과 같은 PaginationNav 컴포넌트이다.

코드는 다음과 같다.

컴포넌트를 분리하기 전

export default function PaginationNav({ courseCount = 0 }: PaginationNavProps) {
  return (
    <nav className="flex justify-center">
      <ArrowLeft />
      {new Array(lastPage - firstPage + 1)
        .fill(0)
        .map((_, index) => index + firstPage)
        .map((page) => (
          <button>
            {page}
          </button>
        ))}
      <ArrowRight />
    </nav>
  )
}

• 전체 코드

{new Array(lastPage - firstPage + 1)
  .fill(0)
  .map((_, index) => index + firstPage)
  .map((page) => (
    <button>
      {page}
    </button>
  ))}

이 배열에 대한 코드가 컴포넌트 흐름과 다르다는 느낌이 있어 분리를 하면 가독성이 더 좋지 않을까? 고민을 했다.

컴포넌트를 분리했을 때

export default function PaginationNav({ courseCount = 0 }: PaginationNavProps) {
  return (
    <nav className="flex justify-center">
      <ArrowLeft />
			<PaginationList currentPage={currentPage} maxPage={maxPage} />
      <ArrowRight />
    </nav>
  )
}
function PaginationList({ currentPage, maxPage }: PaginationListProps) {
	return (
    <div>
      {new Array(shownLastPage - shownFirstPage + 1)
        .fill(0)
        .map((_, index) => index + shownFirstPage)
        .map((page) => (
			    <button>
			      {page}
			    </button>
        ))}
    </div>
  )
}

위와 같은 코드가 될 것이다.

• 전체 코드

컴포넌트를 역할에 맞게 분리하는 게 항상 맞을까?

곰곰히 생각해보면 PaginationList 또한 PaginationNav역할을 하는게 맞다. 그런데 코드가 조금 더 길다고, 추상화 수준을 맞춘다고 컴포넌트를 또 분리하는 게 맞을까?에 대한 고민이다.

분리하기 전과 분리한 후를 비교