axios로 가져온 데이터를 이용하여 게시판 페이지 버튼과 게시판 코드 작성 - filter(), map(), table etc

data는 50~51개의 인덱스를 가진 json data로 만들었음!

• button이 제대로 됐는지 확인하고 싶어서 51개로 늘려봄
• table을 만드는 것까지만이기 때문에 페이지 및 컴포넌트의 이름은 table로 작성

이런 오류가 발생한다면 !! 👉 Warning: validateDOMNesting(...):cannot appear as a child of. Add a,orto your code to match the DOM tree generated by the browser.
📍react에선 tbody와 thead를 작성해야 오류가 발생하지 않음!!!

home에서 보는 위젯 table

import { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { BsArrowRightShort } from "react-icons/bs";
import Tr from "../common/TabelTr";

function Revenue() {
  const [data, setData] = useState([]);
  const urlData = "./data/table.json";
  const axiosData = async () => {
    const jsonData = await axios.get(urlData);
    setData(jsonData.data);
  };
  useEffect(() => {
    axiosData();
  }, []);

  const filterData = data.filter((item) => item.id <= 10);
  return (
    <section className="revenue">
      <div className="revenueSaleBox commonBox">
        <div className="tableScroll">
          <table className="commonTable">
            <thead>
              <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>별도파일</th>
                <th>작성날짜</th>
              </tr>
            </thead>
            <tbody className="revenueSaleTbody">
              {filterData.map((item) => (
                <Tr key={item.id} item={item} />
              ))}
            </tbody>
          </table>
          <Link to="table" className="link tabelLink">
            <span>More view</span>
            <i>
              <BsArrowRightShort />
            </i>
          </Link>
        </div>
      </div>
    </section>
  );
}

export default Revenue;

filter를 이용하여 새로운 배열을 반환해주었다.
원래는 5~6개가 보이게 만들었는데 반응형 제작하다 overflow:scroll로 수정함..👀!

게시판, table + button.map()

위젯과 게시판의 겹치는 css는 common.css로 작성하고 그외 달라지는 부분은 table.css로 작성

간단 메모

  const [data, setData] = useState([]);
  const urlData = "./data/table.json";
  const axiosData = async () => {
    const jsonData = await axios.get(urlData);
    setData(jsonData.data);
  };
  useEffect(() => {
    axiosData();
  }, []);
  // json data를 가져오는 코드


  const filterData = data.filter((item) => item.id <= 10);
  // 한 화면에 table data를 10개씩 보여줄 것이기 때문에 filter를 사용하여 filterData 작성


  // 버튼은 가져온 data를 사용하여 data를 한 페이지인 10으로 나눴을 때 나머지가 있다면 + 1 을 하도록 조건식을 작성할 것임! 
  // 나머지가 없다면 몫 그대로를 사용할 것!
  const buttonArr = [];
  // button도 map()을 사용할 것이기 때문에 배열을 생성해줌

  const buttonIf =
    data.length % 10 === 0 ? data.length / 10 : data.length / 10 + 1;
  // 반복문에 사용할 조건을 삼항연산자를 이용하여 작성

  const buttonData = (index) => {
    let i = 1;
    for (i; i <= index; i++) {
      buttonArr.push(i);
    }
  };

  buttonData(buttonIf);
  // 조건문 실행

버튼을 만드는 조건들은...
쓸데 없이 복잡하게 작성한 것 같기도 하고, 실제 기능구현을 할 때에는 이렇게 쓸 것 같지 않아서 추후 바뀌면 또 게시글 작성하겠음!

한 컴포넌트에 두개 이상의 기능을 구현하지 말라고 했는데
이건 같은 data를 기반으로 하는 비슷한 기능이라 생각되어 한 곳에 작성!
또, 재사용할 것 같지 않다면 컴포넌트를 만들지 않는 방향으로 작성해보려고 함 😊

코드 전문보기

// import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import {
  HiOutlineChevronDoubleLeft,
  HiOutlineChevronDoubleRight,
} from "react-icons/hi";
import axios from "axios";
import Tr from "../components/common/TabelTr";

function LoginPages() {
  const [data, setData] = useState([]);
  const urlData = "./data/table.json";
  const axiosData = async () => {
    const jsonData = await axios.get(urlData);
    setData(jsonData.data);
  };
  useEffect(() => {
    axiosData();
  }, []);
  const filterData = data.filter((item) => item.id <= 10);
  const buttonArr = [];
  const buttonIf =
    data.length % 10 === 0 ? data.length / 10 : data.length / 10 + 1;
  const buttonData = (index) => {
    let i = 1;
    for (i; i <= index; i++) {
      buttonArr.push(i);
    }
  };
  buttonData(buttonIf);
  return (
    <section className="mainWrap tableWrap">
      <h3 className="blind">table</h3>
      <div className="tableBox commonBox">
        <table className="commonTable">
          <thead>
            <tr>
              <th>번호</th>
              <th>제목</th>
              <th>작성자</th>
              <th>별도파일</th>
              <th>작성날짜</th>
            </tr>
          </thead>
          <tbody className="revenueSaleTbody">
            {filterData.map((item) => (
              <Tr key={item.id} item={item} />
            ))}
          </tbody>
        </table>
        <ul className="tableBtn">
          <li>
            <button type="button">
              <i>
                <HiOutlineChevronDoubleLeft />
              </i>
              <span className="blind">맨 앞으로 가기</span>
            </button>
          </li>
          {buttonArr.map((item, key) => (
            <li key={key}>
              <button type="button">{item}</button>
              <span className="blind">{item}페이지로 가기</span>
            </li>
          ))}
          <li>
            <button type="button">
              <i>
                <HiOutlineChevronDoubleRight />
              </i>
              <span className="blind">맨 뒤로 가기</span>
            </button>
          </li>
        </ul>
      </div>
    </section>
  );
}
export default LoginPages;