[스프린트 더줄게 프로젝트] 페이지네이션 컴포넌트를 만들며

기능 요구사항 분석

 

피그마에서 가져왔다. 위에서 알 수 있는 것은 페이지가 최대 7개만 보여져야 한다는 것이고, 선택된 페이지를 가운데에 오도록 해주어야 한다는 것이다.

 

구현

export default function Pagination({ currentPage, setCurrentPage, allDataCount, perPageDataCount }: Props) {
  const pageCount = Math.ceil(allDataCount / perPageDataCount);
  const pageNumberList = createPageNumberList(currentPage, pageCount);

  return (
    <div className={styles.container}>
      {pageCount > PAGE_LIMIT && (
        <button disabled={currentPage < 2} type="button" onClick={() => setCurrentPage(currentPage - 1)}>
          {'<'}
        </button>
      )}
      <ul className={styles.list}>
        {pageNumberList.map(
          (item) =>
            item <= pageCount && (
              <li
                className={`${styles.listItem} ${currentPage === item ? styles.selected : ''}`}
                key={item}
                onClick={() => setCurrentPage(item)}
              >
                {item}
              </li>
            ),
        )}
      </ul>

      {pageCount > PAGE_LIMIT && (
        <button disabled={currentPage === pageCount} type="button" onClick={() => setCurrentPage(currentPage + 1)}>
          {'>'}
        </button>
      )}
    </div>
  );
}

컴포넌트의 경우 위와 같이 구현을 해주었다. createPageNumberList 부분이 중요한데,

 

const createPageNumberList = (currentPage: number, pageCount: number): number[] => {
  let firstCursor = currentPage - Math.floor(PAGE_LIMIT / 2);
  let lastCursor = currentPage + Math.floor(PAGE_LIMIT / 2);

  if (firstCursor < 1) {
    lastCursor += 1 - firstCursor;
    firstCursor = 1;
  }

  if (lastCursor > pageCount) {
    firstCursor -= lastCursor - pageCount;
    firstCursor = firstCursor < 1 ? 1 : firstCursor;
  }

  return new Array(lastCursor - firstCursor + 1).fill(0).map((_, i) => i + firstCursor);
};

 

위와같이 만들어주었다. 나름 직관적으로 이해하기 쉬운 코드라고 생각한다. currentPage를 기점으로 이것이 7개 중에 가운데 오려면 오른쪽, 왼쪽 각각 3개가 있어야 한다. 있다면 그대로 배열을 만들었다. currentPage가 3 이하일 경우에는 모자른 개수 만큼 오른쪽에 오는 값들을 늘리고 반대의 경우도 똑같이 하였다.

 

+추가

const createPageNumberList = (currentPage: number, totalPages: number): number[] => {
  let startPage = 1;

  if (currentPage > 4) {
    startPage = currentPage - 3;
  }

  let endPage = startPage + PAGE_LIMIT - 1;

  if (endPage > totalPages) {
    startPage -= endPage - totalPages;
    endPage = totalPages;
    startPage = startPage < 1 ? 1 : startPage;
  }

  return new Array(endPage - startPage + 1).fill(0).map((_, i) => i + startPage);
};

 

변수명과 로직을 개선해보았다. 코드가 훨씬 파악하기 쉬워진 것 같다.

 

+ 또 추가

 

팀원들의 코드리뷰를 받았는데 let을 쓴 부분과 i와 같이 축약으로 쓴 부분을 고쳐보는게 좋을 것 같다라는 피드백이었다.

const createPageNumberList = (currentPage: number, totalPages: number): number[] => {
  const startPage = Math.max(1, Math.min(currentPage - 3, totalPages - PAGE_LIMIT + 1));
  const endPage = Math.min(startPage + PAGE_LIMIT - 1, totalPages);

  return new Array(endPage - startPage + 1).fill(0).map((_, index) => index + startPage);
};

 

후.. 이렇게 개선해보았다. 팀원들이 아니었으면 생각해보지 않았을 부분이었다. 위 코드의 장점은 간결하다는 것과 let을 안쓴다는 것이다 (eslint prefer/const rule을 끄지 않아도 되었다..) 만세..!! 또 하나 배워간다..좋은 동료의 중요성을 다시 느낀다

 

고민했던 부분

어느 페이지가 select 되었는지 이 컴포넌트를 사용하는 곳에서 알아야 했다. 모르더라도 특정 페이지를 눌렀을 때 실행할 함수를 prop으로 내려주게 하면 될 것 같았지만 페이지네이션 컴포넌트를 특정 기능에 접목하기 이전에는 그것을 확정해서 만들고 싶지 않았다. 그래서 일단 외부에서 currentPage state를 만들어서 Props로 보내주는 로직으로 구현했다. 또 페이지네이션 컴포넌트 클릭 부분에 Link 태그를 넣을지 등 고민을 했었다. 아직은 머릿속에 잘 그려지지 않아 직접 적용시켜 보며 개선해나갈 예정이다.