더미데이터에서 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
2. Router 설치 및 사용방법
https://dev-ini.tistory.com/82
3. useParams, QueryString, useNavigate 사용방법
https://dev-ini.tistory.com/84
4. 리스트 페이지에서 게시글 클릭 시 상세페이지 연결하기
https://dev-ini.tistory.com/105
'Libraries > React' 카테고리의 다른 글
[React] 작성 날짜 기준으로 지난 시간을 변환하기 (리뷰시간, 게시글 시간, 댓글시간, 방금전, 몇분전, 몇시간전, 며칠전) (2) | 2024.01.06 |
---|---|
[React] 중복된 useState 상태 및 함수 코드 정리하기, 컴포넌트 분리하기 (0) | 2024.01.04 |
[React] Filter (3) 리스트 카테고리 필터링 (0) | 2023.12.31 |
[React] Filter (2) 검색창, 검색어, 검색 필터 기능 구현 (검색창 만들기) (2) | 2023.12.28 |
[React] props 완전 정복기 (props 개념 쉽게 이해하기) (0) | 2023.12.24 |