DAY 78 - React HOMEWORK (2024.10.28)

     src

          css

               style05.css

 

          page05

                data.jsx

                Main.jsx

                ProductDetail.jsx

                ProductList.jsx

 

           App.js

           App05.jsx

---

style05.css

.menunav {width: 100%; background: #efefef; padding: 25px 0;}
.menunav ul {display: flex; justify-content: center;}
.menunav ul li {list-style: none; margin-right: 30px;}
.menunav ul li a {transition: 0.3s;}
.menunav ul li a:hover {color: tomato;}

.main {width: 1000px; margin: 50px auto; text-align: center;}
.main h1 {font-size: 70px; margin-bottom: 15px;}
.main h2 {font-size: 50px;}

.products {width: 1100px; margin: 50px auto;}
.products h2 {font-size: 40px; margin-bottom: 20px; font-weight: 600;}
.products div {display: flex; justify-content: space-between;}
.products article {border: 1px solid #dcdcdc; padding: 20px;}
.products article h3 {font-size: 25px; margin-bottom: 15px; text-align: center; color: tomato;}
.products article img {width: 200px;}

.item {width: 1000px; margin: 50px auto; text-align: center;}
.item h2 {font-size: 50px; margin-bottom: 20px; color: tomato;}
.item h3 {font-size: 30px; margin-bottom: 15px;}
.item img {width: 300px;}
.item p:last-of-type {margin-top: 20px; font-size: 20px; margin-bottom: 15px;}
.item button {width: 200px; height: 40px; background: #000; color: #fff; border: none;}

---

App05.jsx

import React from 'react';
import Main from './page05/Main';
import ProductList from './page05/ProductList';
import ProductDetail from './page05/ProductDetail';
import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';

import './css/style05.css'

const App05 = () => {
    return (
        <div>
            <BrowserRouter>
                <>                    
                    <nav className='menunav'>
                        <ul>
                            <li><Link to='/' >Home</Link></li>
                            <li><Link to='/productList' >ProductList</Link></li>
                        </ul>
                    </nav>

                    {/* 화면에 보이는 영역 */}
                    <Routes>             
                        <Route path='/' element={ <Main/>}></Route>
                        <Route path='/productList' element={ <ProductList/>}></Route>                
                        <Route path='/productDetail/'>
                            <Route path=':id' element={ <ProductDetail/>} />
                        </Route>                
                    </Routes>
                </>
            </BrowserRouter>
        </div>
    );
};

export default App05;

---

Main.jsx

import React from 'react';
import { Link } from 'react-router-dom';
import ProductList from './ProductList';

const Main = () => {
    return (
        <div className='main'>
            <h1>짱구의 홈페이지</h1>
            <h2>방문해주셔서 감사합니다.</h2>
            <img src='https://mblogthumb-phinf.pstatic.net/MjAyMDA5MTJfOTgg/MDAxNTk5OTA0OTYyMTg4.m_gfYk5un7sSElyWaR5coC51DQhXC8CSRNdtEjFmnsEg.nhkJTCFAzxFcGc63lbnmB1SUuprO3IlHS7sujKzKZ5Yg.JPEG.kn010123/IMG_1512.JPG?type=w800' alt='메인사진' />
        </div>
    );
};

export default Main;

---

ProductList.jsx

import React, { useState } from 'react';
import data from './data';
import { Link } from 'react-router-dom';
import Main from './Main';
import ProductDetail from './ProductDetail';

const ProductList = () => {

    return (
        <div className='products'>
            <h2>짱구의 일상 리스트</h2>
            <div>
                {
                    data.map(item => (
                        <article key={item.id}>
                            <h3><Link to={`/productDetail/${item.id}`}>{item.name}</Link></h3>
                            <img src={item.photo} alt={item.name} />
                        </article>
                    ))
                }
            </div>
        </div>
    );
};

export default ProductList;

---

ProductDetail.jsx

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import data from './data';

const ProductDetail = () => {
    const { id } = useParams();
    const product = data.find(item => item.id === id); //처음으로 만나는 값을 가져와라

    const navigaete = useNavigate();

    const goHome = () => {
        navigaete('/')
    }

    const goList = () => {
        navigaete('/productList')
    }

    return (
        <div className='item'>
            <h2>짱구의 상세 페이지</h2>
            <h3>제품명: {product.name} / 가격: {product.price}</h3>
            <img src={product.photo} alt={product.name} />
            <p>제품 설명: {product.description}</p>
            <button onClick={ goHome }>HOME</button>
            <button onClick={ goList }>ProductList</button>
            {/* <button onClick={ () => navigaete(-1) }>ProductList</button> */}
        </div>
    );
};

export default ProductDetail;

<button onClick={ () => navigaete(-1) }>ProductList</button>

이렇게도 뒤로가게 할 수 있다는거 확인 !!

---

Index Routes

- Route 에 들어가는 index 라는 값은 default child routes 라고 생각하면 된다

- 부모에 여러 개의 자식 route 있는 경우 부모 경로에서 + '/' 인 경우 설정

<Route path='/productList' element={ <ProductList/>}></Route>                
<Route path='/productList/:id' element={ <ProductList/>}></Route>

위 아래가 같은 코드이다.

<Route path='/productList'>
    <Route index element={ <ProductList/> } />
    <Route path=':id'/>
</Route>

 

index 적힌게 default 값 !