react & react-router-dom - header, footer와 같이 반복되는 컴포넌트를 사용하는 컴포넌트를 추가로 props으로 component를 전달하여 사용하도록 수정

기존엔 Header, Footer, Nav, ContentComponent(내용들) 와 같은 컴포넌트를 따로 만들어 이걸 불러와 사용하는 컴포넌트를 screens에 작성하고, 여기서 해당 페이지 내용의 컴포넌트(Pages폴더에 만들었음)를 props으로 전달해 사용했다.

• 기존에 사용하던 방식을 계속 이어갔었는데 기존엔 컴포넌트로 전달하지 않았기 때문에 위와 같은 방식으로 사용했었음

 

아주아주 비효율적이라고 생각되어 수정하기로 함!

 

공용파일을 작성하는 common 폴더에 MainLayout.jsx라는 파일을 만들었음.

 

MainLayout.jsx

import Nav from "../navigation/NavBox";
import Header from "../header/HeaderBox";
import Footer from "../footer/FooterBox";

function MainLayout({ nowTitle, component }) {
  return (
    <div id="wrap">
      <Nav />
      <div id="WrapBox">
        <Header />
        <div className="containerWrap">
          <h2 className="blind">현재 페이지 내용</h2>
          <div className="contentBox">
            <div className="contentTitleWrap">
              <div className="ContainertitleText">
                <h3>{nowTitle}</h3>
                {/* <ol className="ContainerTitlebreadcrumb">
              <li className="breadcrumbPrev">
                <span>{breadcrumb1}</span>
              </li>
              <li className="breadcrumbPrev">
                <span>{breadcrumb2}</span>
              </li>
              <li>
                <span>{breadcrumb3}</span>
              </li>
            </ol> */}
              </div>
              <button type="button" className="containerTitleBtn">
                Create Report
              </button>
            </div>
            {component}
          </div>
        </div>
        <Footer />
      </div>
    </div>
  );
}

export default MainLayout;

Main은 compoent를 porps으로 전달받아 Container라는 컴포넌트에게 전달해줬는데 과하게 컴포넌트를 사용한 것 같아 Container.jsx를 삭제하고 MainLayout.jsx에 하나로 작성했다.

• ol은 삭제할지 말지 고민하고 있어서 주석처리됨!

 

Home.jsx

import AccountInfo from "../components/sale/AccountInfo";
import DailySales from "../components/sale/DailySales";
import DownloadReport from "../components/sale/DownloadReport";
import Kalender from "../components/sale/Kalender";
import MarketValus from "../components/sale/MarketValus";
import MonthlyInvoices from "../components/sale/MonthlyInvoices";
import NewsAndUpdate from "../components/sale/NewsAndUpdate";
import PopularProducts from "../components/sale/PopularProducts";
import Revenue from "../components/sale/Revenue";
import Summary from "../components/sale/Summary";
import TopGlobalSales from "../components/sale/TopGlobalSales";
import TopSellingProduct from "../components/sale/TopSellingProduct";
import TotalOrder from "../components/sale/TotalOrder";
import TotalSalesUnit from "../components/sale/TotalSalesUnit";
import Transaction from "../components/sale/Transaction";

function Home() {
  return (
    <main className="mainWrap" id="sale">
      <div>
        <Revenue />
        <DownloadReport />
      </div>
      <TotalSalesUnit />
      <DailySales />
      <Summary />
      <TotalOrder />
      <Transaction />
      <NewsAndUpdate />
      <AccountInfo />
      <Kalender />
      <TopGlobalSales />
      <MonthlyInvoices />
      <TopSellingProduct />
      <PopularProducts />
      <MarketValus />
    </main>
  );
}

export default Home;

와 같이 screens폴더에 페이지명의 파일은 해당 페이지에 표시된 요소들만 작성되어있어 보다 직관적으로 파일흐름이 이해될 수 있게 되었다!

 

App.js

    <div className="App">
      <Routes>
        <Route
          path={`${process.env.PUBLIC_URL}/`}
          element={<MainLayout nowTitle="DashBord" component={<Home />} />}
        />
        <Route path={`${process.env.PUBLIC_URL}/login`} element={<Login />} />
        <Route
          path={`${process.env.PUBLIC_URL}/table`}
          element={<MainLayout nowTitle="DashBord" component={<Table />} />}
        />
        <Route
          path={`${process.env.PUBLIC_URL}/adduser`}
          element={<MainLayout nowTitle="AddUser" component={<AddUser />} />}
        />
      </Routes>
    </div>

App.js에는 위와 같이 MainLayout에 prop으로 component를 전달해주는 코드로 작성함!