리액트로 페이지네이션 구현하기

들어가기에 앞서

바닐라 자바스크립트로 페이지네이션을 구현했던 것은 쉽진 않았지만 이정도로 헤매지는 않았던 것 같다. 개념이 부족하다는 생각이 크게 와닿았다. useEffect와 useState, props, setState 끌어올리기, 비동기 등등 개인 프로젝트를 만들면서 몇번 써봤기 때문에 알고 있다고 생각했으나 착각이었다.

몰랐던 것들

1. 자식 컴포넌트의 useEffect가 부모 컴포넌트의 useEffect보다 먼저 실행되더라.
2. 변수가 undefined일 때 처리하는 코드가 얼마나 중요한 지 몰랐다.
3. 비동기 함수(fetch)를 담고있는 함수도 비동기로 작동한다. fetch에 async, await를 했다고 끝이 아니다.
4. React.StrictMode를 사용하면 렌더링을 두 번씩 한다.
5. 자식 컴포넌트에서 처음 렌더링할 때 props가 undefined인데 부모컴포넌트에서 fetch로 받아온 데이터를 props로 넘겨줬을 때 출력되는 것이 4번 때문에 두 번 렌더링 돼서 그런 줄 알았다.(사실은 상위컴포넌트로부터 전달되는 props가 변경되면 컴포넌트가 리렌더링 된 것이다)

등등.. 이런 알듯말듯하면서 안다고 착각했던 것들이, 혹은 아예 알지도 못했던 것들이 직접 하다보니 문제를 복잡하게 만들었다. 물론 이런 것들 때문에 좌절한 것이 아니라 오히려 동기분과 얘기하면서 알아가는 과정이 좋았다. 성공하고 나니 엄청난 성취감은 덤이었다.

코드

1) Home 컴포넌트

-App.js에서 렌더링 하는 컴포넌트다. home에서 Form 컴포넌트, Discussions 컴포넌트, Pagenation 컴포넌트를 렌더링 하고 있다.
-Home컴포넌트에서 useEffect로 데이터를 받아와서, Pagenation 컴포넌트와 Discussions 컴포넌트에 props로 전달해준다.

  import React, { useEffect, useState } from "react";
  import Discussions from "../components/discussions/discussions";
  import QuestionForm from "../components/form/questionform";
  import Pagenation from "../components/pagenation/pagenation";
  import { getData } from "../data/data";
  const Home = (props) => {
    const [discussions, setDiscussions] = useState();
    const [totalPage, setTotalPage] = useState();
    const [currentPage, setCurrentPage] = useState();

    useEffect(() => {
    getDataFromServer();
  }, []);

  const countPages = (data) => {
    let pageNums = [];
    let lastPage = Math.ceil(data.length / 10);
    for (let i = 1; i <= lastPage; i++) {
      pageNums.push(i);
    }
    return pageNums;
  };

    const getDataFromServer = async (page = 1) => {
      let data = await getData();
      setDiscussions(
        data.filter(
          (item, index) => index < 10 * page && index >= 10 * (page - 1)
        )
      );
      setTotalPage(countPages(data));
    };

    return (
      <main>
        <h1>My Agora States</h1>
        <QuestionForm />
        <Discussions getData={getDataFromServer} discussions={discussions} />
        <Pagenation
          getData={getDataFromServer}
          totalPages={totalPage}
        />
      </main>
    );
  };

  export default Home;

2) Discussions 컴포넌트

-여기서 핵심은 discussions && discussions.map이다.

import { useEffect, useState } from "react";
import Discussion from "../discussion/discussion";
import "./discussions.css";
const Discussions = ({ getData, discussions }) => {
  return (
    <section className="discussion__wrapper">
      <ul className="discussions__container">
        {discussions &&
          discussions.map((item) => {
            return <Discussion discussion={item} key={item.id} />;
          })}
      </ul>
    </section>
  );
};

export default Discussions;

3) Pagenation 컴포넌트

-getDataFromServer 함수를 props로 전달받아 페이지를 클릭했을 때, 해당 페이지의 번호를 인자로 전달해서
인덱스가 페이지 번호 * 10인 discussion 부터 10개씩 렌더링 한다.

import React, { useEffect, useState } from "react";
import "./pagenation.css";
const Pagenation = ({ totalPages, getData }) => {
  const handleClick = (e) => {
    getData(e.target.innerHTML);
  };
  return (
    <footer className="pageNumber">
      <ul className="pageNumber__list">
        {totalPages &&
          totalPages.map((num) => {
            return (
              <li
                className="pageNumber__list--item"
                key={num}
                onClick={handleClick}
              >
                {num}
              </li>
            );
          })}
      </ul>
    </footer>
  );
};

export default Pagenation;

4) data.js

export async function getData() {
  const url = "http://localhost:4000/discussions";
  const data = await fetch(url)
    .then((response) => response.json())
    .catch((error) => console.error(error));

  return data;
}