[테이블] 테이블에 데이터 넣기 & 페이지네이션

테이블에 데이터를 넣는 방법입니다. 백엔드에서 데이터를 주기 때문에 간단합니다.

1. 데이터 보내기

우선

// DealingsPage.js

import React, { useState, useEffect } from 'react';
import DealingsTable from './DealingsTable';
import { API } from '../../config/config';

export default function MemberPage() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(`${API.ADMIN}/posts`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setData(data.data);
      });
  }, []);

  return (
    <div className="h-screen flex align py-12 max-w-5xl">
      <DealingsTable data={data} />
    </div>
  );
}

fatch에서 받아온 data를 DealingsTable에 넣습니다.

2. 테이블 만들어서 받은 데이터를 넣는다.

//CommunityTable.js

import React, { useState, useEffect } from 'react';
import './pagingCss.css';

function DealingsTable() {
  const [Data, setData] = useState([]);

  useEffect(() => {
    fetch(`http://92.168.0.194:4000/admin/posts`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setData(data.data);
      });
  }, []);
  // 페이지네이션 라이브러리
  const [currentPage, setCurrentPage] = useState(1);
  const recordsPerPage = 5;
  const lastIndex = currentPage * recordsPerPage;
  const firstIndex = lastIndex - recordsPerPage;
  const records = Data.slice(firstIndex, lastIndex);
  const npage = Math.ceil(Data.length / recordsPerPage);
  const numbers = [...Array(npage + 1).keys()].slice(1);
  return (
    <div className="pl-72 pr-28 flex flex-col items-center justify-center max-w-5xl h-screen">
      <table className="border-spacing-0 border-solid border-2 w-[64rem] mr-96">
        <thead className="pt-52">
          <tr>
            <th className="border-r-2 border-b-2">userId</th>
            <th className="border-r-2 border-b-2">title</th>
            <th className="border-r-2 border-b-2">description</th>
            <th className="border-r-2 border-b-2">location</th>
            <th className="border-r-2 border-b-2">view_cnt</th>
            <th className="border-r-2 border-b-2">pull_uptime</th>
            <th className="border-r-2 border-b-2">post_status_id</th>
          </tr>
        </thead>
        <tbody>
          {records.map((user, i) => (
            <tr key={i}>
              <td className="p-1 border-r-2 border-b-2">{user.userId}</td>
              <td className="p-1 border-r-2 border-b-2">{user.title}</td>
              <td className="p-1 border-r-2 border-b-2">{user.description}</td>
              <td className="p-1 border-r-2 border-b-2">{user.location}</td>
              <td className="p-1 border-r-2 border-b-2">{user.viewCount}</td>
              <td className="p-1 border-r-2 border-b-2">{user.postStatus}</td>
              <td className="p-1 border-r-2 border-b-2">{user.pullUpTime}</td>
            </tr>
          ))}
        </tbody>
      </table>

th는 header이고 td는 data입니다. 받은 데이터를 map을 사용하여 데이터를 풀어줍니다.

3. 페이지네이션

// CommunityTable.js

<nav>
        <ul className="pagination">
          <li className="page-item">
            <a href="#" className="page-link" onClick={prevPage}>
              Prev
            </a>
          </li>
          {numbers.map((n, i) => (
            <li
              className={`page-item ${currentPage === n ? 'active' : ''}`}
              key={i}
            >
              <a href="#" className="page-link" onClick={() => changeCPage(n)}>
                {n}
              </a>
            </li>
          ))}
          <li className="page-item">
            <a href="#" className="page-link" onClick={nextPage}>
              Next
            </a>
          </li>
        </ul>
      </nav>
    </div>
  );
  function prevPage() {
    if (currentPage !== 1) {
      setCurrentPage(currentPage - 1);
    }
  }

  function changeCPage(id) {
    setCurrentPage(id);
  }

  function nextPage() {
    if (currentPage !== npage) {
      setCurrentPage(currentPage + 1);
    }
  }
}

4. 모아놓기

//Community.js

import React from 'react';
import AdminProject from './AdminProject';
import DealingsPage from './DealingsPage';

export default function Dealings() {
  return (
    <>
      <div className="flex pt-20 pr-5">
        <AdminProject />
        <DealingsPage />
      </div>
    </>
  );
}

5. 라우터

import React from 'react';
import { Link } from 'react-router-dom';

export default function AdminProject() {
  return (
    <div className="pt-20 h-screen leading-10 pl-9 w-96 whitespace-nowrap">
      <ul>
        <li>
          <Link to="/member">회원관리</Link>
        </li>
        <li>
          <Link to="/dealings">중고거래 게시글 관리</Link>
        </li>
        <li>
          <Link to="/community">커뮤니티 게시글 관리</Link>
        </li>
      </ul>
    </div>
  );
}

이렇게하면 끝입니다 !