[CSS/리액트] 리액트로 CSS 옮기고 서브페이지 만들기 (4)

참고한 글 

리액트 라우터 2 : navigate, nested routes, outlet (tistory.com)

리액트 라우터 2 : navigate, nested routes, outlet

---

서브페이지 만들기

1) 컴포넌트 모음 폴더 뿐만 아니라
서브 페이지 모음 폴더 생성해주기

src/
│
├── components/
│   ├── Header.js
│   ├── SearchOverlay.js
│   ├── MainContent.js
│   ├── Footer.js
│   ├── LeftSidebar.js
│   └── RightSidebar.js
│
├── App.js
└── index.js

이미 부위별로 컴포넌트를 작성함.

src/
├── components/
│   ├── Header.js
│   ├── SearchOverlay.js
│   ├── MainContent.js
│   ├── Footer.js
│   ├── LeftSidebar.js
│   └── RightSidebar.js
│
├── pages/
│   ├── MainPage.js
│   ├── FingerPage.js
│   ├── HairPage.js
│   └── NeckPage.js
│
├── App.js
└── index.js

페이지별로 컴포넌트도 만들기.

- pages 폴더도 따로 생성해서 구분지어준다.

- 무슨 페이지 만들지 생각해주기.

이렇게 머리삔, 목걸이, 반지 서브페이지 만들어줄 예정.

이렇게 pages 폴더 생성하고, 파일 생성

---

원래 기존 App.js 에 있던 코드

 

import { useState } from "react";
import "./style/main.scss";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import Header from "./components/Header";
import LeftSidebar from "./components/LeftSidebar";
import RightSidebar from "./components/RightSidebar";
import Footer from "./components/Footer";
import MainContent from "./components/MainContent";
import SearchOverlay from "./components/SearchOverlay";

function App() {
  // 카테고리 버튼
  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

  return (
    <div className="wrapper">
      <Routes>
        <Route path="/detail" element={<div>상세페이지임</div>} />
        <Route path="/about" element={<div>어바웃페이지임</div>} />
      </Routes>
      {/* <!-- 검색창 만들기 --> */}
      {Search == true ? <SearchOverlay setSearch={setSearch} /> : null}
      {/* 헤더 */}
      <Header />
      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={setSearch}
          setIsShopHovered={setIsShopHovered}
          isShopHovered={isShopHovered}
          setIsBoardHovered={setIsBoardHovered}
          isBoardHovered={isBoardHovered}
        />
        {/* 중앙 메인 콘텐트 */}
        <MainContent />
        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default App;

---

MainPage.js 에서 메인페이지 컴포넌트 생성하기

import Header from "../components/Header";
import LeftSidebar from "../components/LeftSidebar";
import RightSidebar from "../components/RightSidebar";
import MainContent from "../components/MainContent";
import SearchOverlay from "../components/SearchOverlay";

function MainPage(props) {
  return (
    <div className="wrapper">
      {/* 검색창 */}
      {props.Search === true ? (
        <SearchOverlay setSearch={props.setSearch} />
      ) : null}

      {/* 헤더 */}
      <Header />

      {/* 컨테이너 시작 */}
      <div className="container">
        {/* 왼쪽 aside */}
        <LeftSidebar
          setSearch={props.setSearch}
          setIsShopHovered={props.setIsShopHovered}
          isShopHovered={props.isShopHovered}
          setIsBoardHovered={props.setIsBoardHovered}
          isBoardHovered={props.isBoardHovered}
        />

        {/* 중앙 메인 콘텐츠 */}
        <MainContent />

        {/* 우측 aside */}
        <RightSidebar />
      </div>
    </div>
  );
}

export default MainPage;

컴포넌트 import 해주고 컴포넌트 넣어준다.

 

그리고 App.js 에 있는 state 들

  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

이것들 써 줄 것이므로 props 써 줌.

 

App.js 로 돌아와서

Route = 페이지 하나 만들어주고

( 페이지 구분하는 것 = 라우팅 )

만들어준 MainPage 컴포넌트 element 에 넣어주기.

그리고 props 사용 준비물 써준다.

자식컴포넌트 만드는 function 으로 가서 props 라는 파라미터 등록

import { useState } from "react";
import "./style/main.scss";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import MainPage from "./pages/MainPage";

function App() {
  // 카테고리 버튼
  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

  return (
    <Routes>
      <Route
        path="/"
        element={
          <MainPage
            Search={Search}
            setSearch={setSearch}
            isShopHovered={isShopHovered}
            setIsShopHovered={setIsShopHovered}
            isBoardHovered={isBoardHovered}
            setIsBoardHovered={setIsBoardHovered}
          />
        }
      />
    </Routes>
  );
}

export default App;

이렇게 메인 Route 완성

---

서브 Route 생성해주기

├── FingerPage.js
├── HairPage.js
└── NeckPage.js

나머지 페이지들도 만들어줘야 함.

 

우선 404 페이지 먼저 만들어주기

 <Route path="*" element={<div>없는페이지</div>} />

*별표* 의미
= 이 외의 모든 것. 

추후에 꾸며줄 예정

 

서브경로 만들 수 있는 nested routes 사용해서 상품페이지 만들기.
nested routes = 여러 유사 페이지 필요할 때 사용.

      <Route path="/shop" element={<div>서브페이지</div>}>
        <Route path="fingers" element={<div>asdfadf</div>} />
        <Route path="hair" element={<div>asdfadf</div>} />
        <Route path="neck" element={<div>asdf</div>} />
      </Route>

Route 태그를 닫지 않고,

안에다가 서브 Route( 앞에 / 이거 안쓰는거 확인 ) 들 써주고 닫아줌.

+ 그리고 페이지 내부 어디에 써줄 지 작성도 해줘야 함

= 컴포넌트 안에다가 Outlet  이라고 써서 위치 정해줘야 한다.

참고 이미지

* shop 이라는 주소 element 안에다가 Outlet 을 넣어주는 것.

참고 이미지

nested routes 의 element 를 보여주는 것 = < Outlet > 

---

import { useState } from "react";
import "./style/main.scss";
import { Routes, Route, Outlet } from "react-router-dom";
import MainPage from "./pages/MainPage";

function App() {
  // 카테고리 버튼
  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

  return (
    <Routes>
      <Route
        path="/"
        element={
          <MainPage
            Search={Search}
            setSearch={setSearch}
            isShopHovered={isShopHovered}
            setIsShopHovered={setIsShopHovered}
            isBoardHovered={isBoardHovered}
            setIsBoardHovered={setIsBoardHovered}
          />
        }
      />{" "}
      <Route path="/shop" element={<div>서브페이지</div>}>
        <Route path="fingers" element={<div>asdfadf</div>} />
        <Route path="hair" element={<div>asdfadf</div>} />
        <Route path="neck" element={<div>asdf</div>} />
      </Route>
      <Route path="*" element={<div>없는페이지</div>} />
    </Routes>
  );
}

export default App;

생성 해놓은 라우터들

 

이제 element 에 뭘 채울 지 넣으면 된다.