[React.js] React에서 페이지네이션 구현하기

🧑🏻‍💻 그런 욕심이 들 때가 있다.

대학교 졸업 학기, 현장 개선 캡스톤 디자인 수업 (일명 졸업작품)을 듣고 있다.

 

팀장을 맡아서 우리 대학의 취업 역량 강화 프로그램 점수를 기반으로 하는 랭킹 커뮤니티 사이트를 개발하고 있는데, 사용자들의 랭킹을 보여줄 때 한 페이지에 30개의 데이터만 보여주고 싶었다. 못해도 전체 재학생 수가 1,000명은 족히 넘을 것이므로 한 페이지만으로 랭킹을 보여주기에는 가독성이 떨어지니까.

 

그래서 페이지네이션 처리가 필요했는데, 백엔드를 개발하는 팀원에게 부탁하기에는 이미 그가 만들어 주기를 기다리고 있는 수많은 API가 줄을 서 있었기에 팀장으로서 이 정도 처리는 프론트에서 하겠다 자신있게 말을 하고는 페이지네이션에 대한 자료를 이것저것 찾아보았다.

💡 페이지네이션(Pagination)이란?
다수의 컨텐츠를 여러개의 페이지로 나누고 페이지 번호, 이전 & 다음 페이지 버튼으로 페이지를 오갈 수 있게 하는 것.

그리고 당연히 라이브러리 빼면 시체인 JavaScript 답게 페이지네이션을 위한 라이브러리 또한 존재했다.

react-paginate

하지만, 웹 프론트엔드 개발자가 되려면 이 정도는 구현해봐야 하지 않을까... 하는 마음에 직접 구현해보기로 하였다.

 

🔧 페이지네이션을 위한 기본 지식.

페이지네이션을 구현하기 위해서 다방면으로 자료를 접했고, 다음과 같은 요소들이 있어야 구현할 수 있음을 알게 되었다.

• 표시할 내용의 전체 길이
• 페이지마다 표시할 내용의 한도
• 내용을 표시할 페이지의 전체 개수
• 각 페이지 별 가장 처음 표시될 내용의 인덱스 (이를 offset이라고 하는 것 같다)

표시할 내용의 전체 길이부터 설명을 해보자면 나에게는 랭킹 리스트의 길이가 되겠다. 이어서 내용을 표시할 페이지의 전체 개수는 표시할 내용의 전체 길이를 페이지마다 표시할 내용의 한도로 나누어 반올림 하면 된다. 예를 들어 50개의 데이터를 한 페이지 당 30개씩 표시하고 싶다면 만들어야 할 전체 페이지의 개수는 50 / 30 = 2 (반올림)가 된다.

 

각 페이지별로 가장 처음 표시될 내용의 인덱스, 즉 offset을 구해보자. 위의 예를 그대로 갖고오자면 50개의 데이터를 2 페이지에 나눠 30개씩 보여줄 경우 1 페이지에 30개, 2 페이지에 20개씩 출력이 될 것이고, 각 offset은 1 페이지에서는 리스트에서 0번째 인덱스의 원소가 될 것이고, 2 페이지에서는 30번째 원소가 될 것이다. 

 

offset을 구하는 공식은 아래와 같다.

💡 (현재 페이지 번호 - 1) * 페이지마다 표시할 내용의 한도

위의 예처럼 한 페이지 당 30개씩 출력할 경우의 1 페이지 offset을 구할 때 공식을 적용하면 (1 - 1) * 30이 되어 0이 된다.

2 페이지의 offset을 구할 때도 잘 들어맞는 것을 확인할 수 있다.

 

🤔 나의 솔루션

나의 목표

한 번에 5 페이지를 오갈 수 있게 하며, 데이터의 양이 많아 그 이상으로 늘어날 경우 이전, 다음 페이지로 넘어갈 수 있는 기능 구현.

다음 페이지네이션으로 넘어갈 때에는 5 페이지 이후의 6페이지를 바로 보여줄 수 있어야 한다. 이 기능을 구현하기 위해 페이지네이션의 페이지네이션을 구현해야 했다. (중첩 페이지네이션 ㄷㄷ)

 

페이지네이션을 위한 Pagination 컴포넌트

리스트의 페이지네이션을 위한 Pagination 컴포넌트는 다음과 같은 항목을 props로 받아들인다.

• listLen : number / 리스트의 전체 길이
• limit : number / 한 페이지에 표시할 데이터 개수
• curPage : number / 현재 리스트에 표시할 페이지
• setCurPage : any / curPage의 값을 변경하기 위한 setState 함수

그리고 이 컴포넌트 안에서는 다음과 같은 변수들을 추가로 사용하였다. 각 변수에 대한 설명은 주석으로 달아두었다.

const paginationLimit: number = 5; //페이지네이션 당 5개의 항목으로 제한 1 ~ 5, 6 ~ 10...
const numPages: number = Math.ceil(listLen / limit); //만들어야 할 페이지의 갯수
const [curPagination, setCurPaginaiton] = useState<number>(1); //현재 pagination의 index
const [paginationOffset, setPageinationOffset] = useState<number>(1); //pagination의 시작 지점 (offset)
const [paginationArray, setPaginationArray] = useState<Array<number>>([]); //pagination을 사용할 numPages만큼의 배열
const numPagination: number = Math.ceil(numPages / paginationLimit); //pagination의 pagination 갯수

이 중 curPagination, paginationOffset, numPagination은 이 페이지네이션 컴포넌트 내에서의 페이지네이션을 위해 사용한 것이다.

1 ~ 5 페이지를 확인 후 다음 6 ~ 10 페이지를 확인하기 위해 다음으로 넘어갈 경우 6 페이지부터 리스트에 보여주기 위해 필요했다.

 

{paginationArray
        .slice(paginationOffset, paginationOffset + paginationLimit)
        .map((item, index) => (
          <Button key={index}>
            <p
              id={(item + 1).toString()}
              className={`page ${curPage === item + 1 ? "active" : ""}`}
              onClick={onClickHandler}
            >
              {item + 1}
            </p>
          </Button>
        ))}

위 코드는 주요 로직 코드인데, Styled-Components를 사용했기 때문에 이 점은 감안해주시길....

paginationArray는 전체 페이지를 나열하여 배열로 만든 것이다. 가령 전체 리스트의 길이가 300개여서 전체 페이지의 개수가 10개가 필요하다고 했을 때, paginationArray는 0 ~ 9의 값이 들어있다. 이것을 paginationOffset부터 시작하여 paginationOffset + paginationLimit 만큼 slice() 하여 해당 부분만 map()을 이용해 리스트 렌더링을 진행하는 것이다.

가령 1 번째 페이지네이션을 보여줄 때에는 0 ~ 4 까지만 잘라 이를 렌더링 하는 것이다.

 

{curPagination >= 2 && (
      <PaginationButton id={"decrease"} onClick={onClickHandlerPagination}>
        <FontAwesomeIcon icon={faAngleLeft} size="2x" color="#1e98fd" />
      </PaginationButton>
)}
      
{curPagination != numPagination && (
      <PaginationButton id={"increase"} onClick={onClickHandlerPagination}>
        <FontAwesomeIcon icon={faAngleRight} size="2x" color="#1e98fd" />
      </PaginationButton>
)}

이 로직은 첫 페이지네이션을 제외한 페이지네이션에서 이전 버튼을 렌더링하고, 마지막 페이지를 제외한 페이지네이션에서 다음 버튼을 렌더링 하기 위한 로직이다. div의 id를 각각 "decrease"와 "increase"로 설정하여 onClickHandlerPagination 이벤트 핸들링을 통해 현재의 페이지네이션을 변경하게 된다.

 

아래는 Pagination 컴포넌트의 전체 코드이다.

  const onClickHandler = (e: React.MouseEvent) => {
    console.log((e.target as HTMLParagraphElement).id);
    setCurPage(Number((e.target as HTMLParagraphElement).id));
  };

  const onClickHandlerPagination = (e: React.MouseEvent) => {
  	//페이지네이션의 이전, 다음을 위한 onClick Handler
    const value: string = (e.target as any).id;
    console.log((e.target as any).id);

    if (value === "decrease") {
      setCurPaginaiton(curPagination - 1);
    } else if (value === "increase") {
      setCurPaginaiton(curPagination + 1);
      
    }
  };

  useEffect(() => {
  	//현재 페이지네이션이 변경되면 페이지네이션 오프셋과 현재 페이지를 해당 페이지네이션의 첫 번째 페이지로 갱신
    setPageinationOffset((curPagination - 1) * paginationLimit);
    setCurPage(curPagination * paginationLimit - 4);
  }, [curPagination]);

  useEffect(() => {
  	//전체 페이지 개수를 통해 0 ~ 전체 페이지 개수를 담은 배열을 생성한다.
    let arr: Array<number> = Array(numPages)
      .fill()
      .map((item, index) => {
        return index;
      });
    setPaginationArray(arr);
  }, [numPages]);

  return (
    <PaginationContainer>
      {curPagination >= 2 && (
        <PaginationButton id={"decrease"} onClick={onClickHandlerPagination}>
          <FontAwesomeIcon icon={faAngleLeft} size="2x" color="#1e98fd" />
        </PaginationButton>
      )}
      {paginationArray
        .slice(paginationOffset, paginationOffset + paginationLimit)
        .map((item, index) => (
          <Button key={index}>
            <p
              id={(item + 1).toString()}
              className={`page ${curPage === item + 1 ? "active" : ""}`}
              onClick={onClickHandler}
            >
              {item + 1}
            </p>
          </Button>
        ))}
      {curPagination != numPagination && (
        <PaginationButton id={"increase"} onClick={onClickHandlerPagination}>
          <FontAwesomeIcon icon={faAngleRight} size="2x" color="#1e98fd" />
        </PaginationButton>
      )}
    </PaginationContainer>
  );
};

 

데이터를 표시할 ListTable에서의 페이지네이션 솔루션

랭킹 리스트는 여러 곳에서 쓰이므로 테이블을 별도의 컴포넌트, ListTable로 추출하여 재사용의 편의를 도모했다. 

이 ListTable 컴포넌트의 props는 다음과 같다.

• head : Array<string> / 테이블 헤드로 쓰일 문자열 배열
• list : React.ReactNode[][] / tr에 표시할 데이터를 담은 리액트 노드 배열
• offset : number / 각 페이지의 시작점을 알려주기 위한 offset
• limit : number / 각 페이지가 보여줄 리스트의 최대 길이

{data.slice(offset, offset + limit).map((row, index) => (
            <tr key={index}>
              {row.map((col, index) => (
                <td key={index}>{col}</td>
))}

전체 리스트로 들어온 data를 offset에서부터 시작하여 offset + limit 까지 잘라 map()을 통해 리스트 렌더링을 진행한다. 만약 1 페이지여서 offset이 0이라면 0 ~ 30 까지의 데이터를 리스트에 출력시키게 되는 것이다. 이를 통해 한 페이지에 30개씩 리스트를 보여줄 수 있다.

 

아래는 ListTable 컴포넌트의 전체 코드이다.

const ListTable = ({ head, list, offset, limit }: Props) => {
  const [isMounted, setMounted] = useState(false);
  const [data, setData] = useState<React.ReactNode[][]>([]);

  useEffect(() => {
    setMounted(true);
  }, []); // Prevent hydration error

  useEffect(() => {
    setData(list);
  }, [list]);

  return (
    isMounted && (
      <TableStyle>
        <TheadStyle>
          {head.map((thData, index) => (
            <th key={index}>{thData}</th>
          ))}
        </TheadStyle>
        <TbodyStyle>
          {data.slice(offset, offset + limit).map((row, index) => (
            <tr key={index}>
              {row.map((col, index) => (
                <td key={index}>{col}</td>
              ))}
            </tr>
          ))}
        </TbodyStyle>
      </TableStyle>
    )
  );
};

 

전체 랭킹을 보여주는 RankingAll 컴포넌트

RankingAll 컴포넌트는 위의 Pagination 컴포넌트와 Pagination을 합성해서 사용자별 전체 랭킹을 보여주는 컴포넌트다.

이 컴포넌트에서는 axios를 활용한 비동기 통신을 통해 API에서 전체 사용자 랭킹을 받아온 뒤, ListTable에 넘겨주기 위해 React.Node[][] 타입으로 가공한다. 그리고 curPage와 offset을 지정하여 ListTable과 Pagination으로 각각 props로 넘겨주게 된다.

 

내가 생각하기에 현재 페이지와 현재 페이지를 갱신하는 함수를 props로 내려주는 것보다 좋은 방법이 있을 것 같은데 지금의 내 머리로써는 여기가 한계인 것 같다.

 

설계로는 각 항목별 랭킹 데이터를 각각의 컴포넌트가 렌더링 될 때 API를 호출하여 받아오고 ListTable에 넘기고자 했기 때문에 이런식으로 구현하게 되었다. 언제나 그렇듯 이것보다 좋은 방법은 더 있겠지만...

 

RankingAll 컴포넌트의 전체 코드

const RankingAll = () => {
  const limit: number = 30; //랭킹 목록 제한
  const [curPage, setCurPage] = useState<number>(1); //현재 페이지
  const [offset, setOffset] = useState<number>(0);
  const [allListLen, setAllListLen] = useState<number>(0);
  const [rankingAll, setRankingAll] = useState<React.ReactNode[][]>([]);


  const refactorData = (list: userData[]) => {
    let tmpArray: React.ReactNode[][] = [];
	//리팩토링 로직 생략
    setRankingAll(tmpArray);
  };


  useEffect(() => {
    axios
      .get("http://Host:port/allRanking")
      .then(function (response) {
        // 성공 핸들링
        setAllListLen(response.data.length);
        refactorData(response.data);
        console.log("Loaded All Ranking Data");
      })
      .catch(function (error) {
        // 에러 핸들링
        console.log(error);
      })
      .finally(function () {
        // 항상 실행되는 영역
      });
  }, []);

  useEffect(()=> {
    setOffset((curPage - 1) * limit);
    //오프셋 (페이지 시작점) 적용.
  },[curPage]);

  return (
    <ListAllContainer>
      <ListTable head={tableHead} list={rankingAll} offset={offset} limit={limit} />
      <Pagination listLen={allListLen} limit={limit} curPage={curPage} setCurPage={setCurPage}/>
    </ListAllContainer>
  );
};

 

👀 마치며.

전체 리스트가 50개 밖에 되지 않아 2개의 페이지만 존재하는 페이지네이션.

props로 주어지는 listLen을 임의로 1000으로 늘렸을 때의 페이지네이션.

 

결론적으로는 내가 원하는 것을 모두 구현해내긴 했다.

코드가 조금은 지저분하고 이것보다 더 나은 방법이 있을 거라 분명히 생각은 하지만, 그동안 라이브러리에 의존해 온 내가 라이브러리 대신 스스로 기능을 구현하기 위해 노력하고 고민한 과정이 괜시리 자랑스럽다.

 

코졸업 작품을 학기 내에 끝내야 하는 만큼 속도도 중요하기에 이번의 페이지네이션 구현은 여기서 끝마칠까 한다. 졸작이 끝나면 그때라도 더 좋은 방향으로 리팩토링을 해나가면 좋을 것 같다.

 

내가 자료를 한창 찾아볼 때 본 다른 실력자분들의 글은 이것보다 많이 깔끔했던 것 같은데 어째서 내가 쓴 글은 뭔가 빙빙 돌아가는 기분이다. 글도 자주 써보면서 감을 익혀야겠다.