React Web Structure Test5

주요 개념

각 페이지 내 Link 컴포넌트로 item번호 전달
페이지 라우팅 최상단 부모 컴포넌트로 이동 / 페이지 세분화

실습 환경

nodejs react 패키지

구현 결과

./app.js

각 메뉴 페이지 동적할당
로그인 / 상세정보 페이지 포함

//------------------------------ MODULE -------------------------------------
import 'App.css';
import React, { useContext } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Main, Auth, PageNotFound, Detail, Pages, Search } from "Routes";
import Context from "Context";

//------------------------------ COMPONENT -----------------------------------
const App = () => {  
  const data = useContext(Context).goods;
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />}>
          {
            Pages.map((item, index) => {
              return (
                <Route path={`/${item.dir}`} element={React.createElement(item.content, {data:data[index]})} key={index}/>    
              )
            })        
          }
          <Route path="/Detail" element={<Detail />} />
          <Route path="/Search" element={<Search data={data}/>} />
        </Route>
        <Route path="/Auth" element={<Auth />} />        
        <Route path="/*" element={<PageNotFound />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

./Pages/Home.js

Link 태그 parameter로 item 번호 넘기기

//------------------------------ MODULE -------------------------------------
import styled from "styled-components";
import { Link } from "react-router-dom";

//------------------------------ CSS ----------------------------------------
const StyledDiv = styled.div`
    width:320px;
    height:320px;
    padding:15px;
    text-align:center;
`;
const StyledImg = styled.img`
    width:220px;
    height:220px;
    padding:15px;    
`;
const StyledText = styled.div`
    font-size:8px;
    font-style:italic;
    font-weight:bold;
`;

//------------------------------ COMPONENT ----------------------------------
const Home = ({data}) => {
    return (
        <>
            {data.map((item, index) => {
                return (                    
                    <StyledDiv key={index}>
                        <Link to={`/Detail?id=${item.id}`}>
                            <StyledImg src = {item.thumbnail}></StyledImg>
                            <StyledText>Name : {item.name}</StyledText>
                            <StyledText>Price : {item.price}</StyledText>
                        </Link>
                    </StyledDiv>
                )
            })}
        </>
    )
}

export default Home;

./Detail/Detail.js

parameter 쿼리로 받아서 Context

//------------------------------ MODULE -------------------------------------
import {useContext} from 'react';
import styled from "styled-components";
import Context from "Context";
import { useLocation } from 'react-router-dom';

//------------------------------ CSS ----------------------------------------
const StyledDiv = styled.div`
    display:grid;
    width:85%;
    padding:15px;
    grid-template-columns: repeat(2, 1fr);
`;

const StyledImg = styled.img`
    width:600px;
    height:600px;
    padding:15px;  
`;
const StyledText = styled.div`
    font-size:15px;
    font-weight:bold;
    padding:15px;
`;

//------------------------------ COMPONENT ----------------------------------
const Detail = () => {
    const query = new URLSearchParams(useLocation().search);
    const item_no = query.get('id');
    const data = useContext(Context).goods;
    return (
        <>
            <StyledDiv>
            <StyledImg src = {data[0][item_no].img}/>
            <StyledText>            
                <h1>{data[0][item_no].name}</h1>
                {data[0][item_no].desc}
            </StyledText>
            </StyledDiv>
        </>
    )
}

export default Detail;

← Previous Post Next Post →