/detail로 접속하면 상세페이지 보여주고
/cart로 접속하면 장바구니페이지 보여주고
페이지 나누는 법(리액트 미사용)
- html 파일 만들어서 상세 페이지 내용 채움
- 누가 /detail로 접속하면 html 파일 보내줌
페이지 나누는 법(리액트 사용) - single page html(index.html만 사용
- 컴포넌트 만들어서 상세페이지 내용 채움
- 누가 /detail 접속하면 그 컴포넌트 보여줌
- 터미널에 react-router-dom 라이브러리 설치(6버전)
npm install react-router-dom@6- index.js에 BrowserRouter import 해오기
import { BrowserRouter } from 'react-router-dom';- index.js 에서 App컴포넌트를 BrowserRouter로 감싸기
<BrowserRouter>
<App/>
</BrowserRouter>const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);- App.js에 Routes, Route, Link import 해오기
import { Routes, Route, Link } from 'react-router-dom';- 내가 만든 js 파일들은 ./부터 (Card.js)
- ./이 없는 것들은 대부분 설치한 라이브러리 (ex. react-router-dom)
라우터로 페이지 나누는 법
- Route를 Routes로 감싼다
<Routes>
<Route />
</Routes>- Route의 path 작성 (url에 작성해야할 path)
<Routes>
<Route path="/" /> #http://localhost:3000/
<Route path="/detail" /> #http://localhost:3000/detail
<Route path="/about" /> #http://localhost:3000/about
</Routes>- 그 페이지에서 보여주고 싶은 컴포넌트 및 내용을 element에 작성
(1) 내용을 element 에 직접 작성
<Routes>
<Route path="/" element={<div>메인페이지임</div>} />
<Route path="/detail" element={<div>상세페이지임</div>} />
<Route path="/about" element={<div>어바웃페이지임</div>} />
</Routes>(2) Component를 element 에 작성
<Routes>
<Route path="/detail" element={<Detail/>}/>
<Route path="/about" element={<About/>}/>
</Routes>Q. 상품 목록은 메인페이지에만 보여주고 싶은데?
→ 그러면 <></> 안에 메인페이지에 보여주고 싶은 내용을 담자!
→ <></>에 넣는 이유는 하나의
태그로 이루어져야하므로!!
<Route path="/" element={
<>
<div className="main-bg"></div>
<div className="container">
<div className="row">
{
shoes.map((a,i)=>{
return (
<Card shoes={shoes[i]} i={i}></Card>
)
})
}
</div>
</div>
</>
} />→ 그래서 페이지도 컴포넌트로 만들면 좋음!!
→ 일반 유저들은 path를 모르므로 페이지 이동버튼을 만들자
실습코드
//App.js
import './App.css';
import {Button, Navbar, Container, Nav} from 'react-bootstrap';
import data from './data';
import { useState } from 'react';
import {Routes, Route, Link} from 'react-router-dom';
import Detail from './Detail.js';
function App() {
let [shoes] = useState(data);
return (
<div className="App">
<Navbar bg="light" variant="light">
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#cart">Cart</Nav.Link>
</Nav>
</Container>
</Navbar>
<Routes>
<Route path="/" element={
<>
<div className="main-bg"></div>
<div className="container">
<div className="row">
{
shoes.map((a,i)=>{
return (
<Card shoes={shoes[i]} i={i}></Card>
)
})
}
</div>
</div>
</>
}/>
<Route path="/detail" element={<Detail/>}/>
</Routes>
</div>
);
}
function Card(props) {
return (
<div className="col-md-4">
<img src={'https://codingapple1.github.io/shop/shoes' + (props.i+1) +'.jpg'} width="80%"/>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.price}</p>
</div>
)
}
export default App;//Detail.js
function Detail(){
return (
<div>
<div className="container">
<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
</div>
)
}
export default Detail