[React] Routing (5) 데이터에서 route 설정하기

 

더미데이터에서 route 설정하는 법을 알아보자!

 

 

---

 

 

 

 구현해야할 것 

 

메인페이지에는 먹거리, 볼거리, 놀거리, 카페, 테마카페가 있다. 
각각의 항목에 맞는 개별 페이지로 이동하게 해야한다.
예컨대, 먹거리를 누르면 한식, 중식, 일식, 양식, 치킨 , 패스트푸드가 담긴 페이지가 뜨게끔 route를 설정해야한다. 

 

 

 메인페이지  (Main.jsx)

 

 

 하위 카테고리 페이지 

"먹거리"를 누른 경우(좌측)와 "볼거리"를 누른 경우(우측)

 

"놀거리"를 누른 경우(좌측)와 "테마카페"를 누른 경우(우측)

 

 

 

 순서 

1. App.js에 route를 설정한다. 메인, 먹거리, 볼거리, 놀거리, 카페, 테마카페 총 6개의 route를 설정한다.
2. main.js에다가 더미 데이터를 만들 때, 각각의 항목에 맞는 route를 설정해준다.
2. 메인페이지(Main.jsx)에서 main.js 데이터를 보라색 박스 컴포넌트에다가 map 돌린다.
3. 보라색 박스 컴포넌트를 버튼 태그로 감싸고, 클릭 이벤트로 navigate(props.route) 를 단다.

 

 

---

 

 

 Main.jsx  (메인페이지)

main이라는 데이터를  CategoryBox라는 컴포넌트에 map을 돌린다.

import styles from "./Main.module.css";
import {CategoryBox} from "../../components/CategoryBox/CategoryBox";
import {main} from "../../const/main";

const Main = () => (
  <>
    <div className={styles["main-category-container"]}>
      {main.map((el) => {
        return <CategoryBox key={el.id} {...el} />;
      })}
    </div>
  </>
);

export default Main;

 

 

 main.js  (메인페이지에서 불러오는 더미데이터)

main 데이터는 먹거리, 볼거리, 놀거리, 카페, 테마카페로 구성돼잇으며, 
각각의 route를 각각의 페이지로 연결해준다. (App.jsx에 설정해둔 route로 설정)

import Eating from "../assets/main/eating.png";
import Watching from "../assets/main/watching.png";
import Playing from "../assets/main/playing.png";
import Cafe from "../assets/main/cafe.png";
import ThemeCafe from "../assets/main/theme-cafe.png";


export const main = [
  {
    id: 1,
    title: "먹거리",
    src: Eating,
    route: "/Eating",
  },
  {
    id: 2,
    title: "볼거리",
    src: Watching,
    route: "/Watching",
  },
  {
    id: 3,
    title: "놀거리",
    src: Playing,
    route: "/Playing",
  },
  {
    id: 4,
    title: "카페",
    src: Cafe,
    route: "/List",
  },
  {
    id: 5,
    title: "테마\n카페",
    src: ThemeCafe,
    route: "/ThemeCafe",
  },
  {
    id: 6,
    title: "Coming\nsoon..",
  },
];

 

 App.js의 route 

{/* 메인 페이지 */}
<Route path="/" element={<Main />} />

{/* 서브 페이지 */}
<Route path="/Eating" element={<Eating />} />
<Route path="/Watching" element={<Watching />} />
<Route path="/Playing" element={<Playing />} />
<Route path="/ThemeCafe" element={<ThemeCafe />} />

 

 

 CategoryBox.jsx  (보라색 개별 박스) 

import styles from "./CategoryBox.module.css";
import {useNavigate} from "react-router-dom";

export const CategoryBox = (props) => {
  const navigate = useNavigate();
  return (
    <>
      <button
        onClick={() => {
          navigate(props.route);
        }}
        className={styles["main-category-container"]}
      >
        <div className={styles["main-category-box"]}>
          <span className={styles["main-category-box-title"]}>{props.title}</span>
          <img className={styles["main-category-box-img"]} src={props.src} />
        </div>
      </button>
    </>
  );
};

 

 

 Eating.jsx  (먹거리 페이지)

main이라는 데이터를  SubCategoryBox라는 컴포넌트에 map을 돌린다.

const Eating = () => (
  <>
    <div className={styles["main-category-container"]}>
      {eating.map((el) => {
        return <SubCategoryBox key={el.id} {...el} />;
      })}
    </div>
  </>
);

export default Eating;

 

 

 eating.js  (먹거리 페이지에서 불러오는 더미데이터)

import Korea from "../assets/sub/eating/korean-food.png";
import China from "../assets/sub/eating/chinese-food.png";
import Japan from "../assets/sub/eating/japanese-food.png";
import Western from "../assets/sub/eating/western-food.png";
import Chicken from "../assets/sub/eating/chicken.png";
import Fastfood from "../assets/sub/eating/fast-food.png";



export const eating = [
  {
    id: 1,
    title: "한식",
    src: Korea,
  },
  {
    id: 2,
    title: "중식",
    src: China,
  },
  {
    id: 3,
    title: "일식",
    src: Japan,
  },
  {
    id: 4,
    title: "양식",
    src: Western,
  },
  {
    id: 5,
    title: "치킨",
    src: Chicken,
  },
  {
    id: 6,
    title: "패스트푸드",
    src: Fastfood,
  },
];

 

 

 SubCategoryBox.jsx  (하늘색 개별 박스)

import styles from "./SubCategoryBox.module.css";

export const SubCategoryBox = (props) => (
  <>
      <a href="#" className={styles["sub-category-container"]}>
        <div className={styles["sub-category-box"]}>
          <span className={styles["sub-category-box-title"]}>{props.title}</span>
          <img className={styles["sub-category-box-img"]} src={props.src} />
        </div>
      </a>
  </>
);

 

 

---

 

 

 Router  시리즈 몰아보기 (기초부터 심화까지) 

 

 

 1. Router의 개념 

 

https://dev-ini.tistory.com/81

[React] Routing (1) 개념, SPA & CSR

 

 

 2. Router 설치 및 사용방법 

 

https://dev-ini.tistory.com/82

[React] Routing (2) Router 설치 및 사용방법 완벽 정리

 

 

 3. useParams, QueryString, useNavigate 사용방법 

 

https://dev-ini.tistory.com/84

[React] Routing (3) Path Variable(useParams), Query String(useSearchParams), Page Moving(useNavigate)

 

 

 4. 리스트 페이지에서 게시글 클릭 시 상세페이지 연결하기 

 

https://dev-ini.tistory.com/105

[React] Routing (4) 리스트 페이지에서 게시글 클릭 시 상세 페이지 연결하기 (게시판 리스트 조회, us