■ 리액트 라우터
리액트 라우터(react-router)란?
보통 사이트를 만들 때 html 파일을 여러 개 만들어서 페이지를 나눕니다.
그런데, 리액트에서는 html 파일을 하나만 사용합니다.
그리고 다른 페이지를 요청하면 내부의 <div>를 갈아치워서 보여줍니다.
이런 작업을 도와주는 외부 라이브러리가 react-router-dom 입니다.
리액트 라우터(react-router) 설치 및 사용 방법
1. 터미널에서 npm install react-router-dom@6 입력해서 설치
2. index.js 파일로 들어가서 셋팅하기
// 상단에 import 추가
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
// <BrowserRouter> 태그를 만들어서 <App> 감싸기
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
3. App.js 파일로 들어가서 셋팅하기
(App.js)
// 상단에 import 추가
import { Routes, Route, Link } from 'react-router-dom'
function App(){
return (
(생략)
// <Routes><Route>태그 넣기
<Routes>
<Route path="/" element={ <div>메인페이지임</div> } />
<Route path="/detail" element={ <div>상세페이지임</div> } />
</Routes>
)
}
<Routes> 안에 <Route>를 넣고, <Route path="/url경로" element={<보여줄html>}/ > 로 작성합니다.
4. 페이지 이동버튼은 <Link> 태그 사용
<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>
리액트 라우터(react-router) 실습
리액트 라우터를 사용해서 우리가 만들고 있던 쇼핑몰에 상세페이지를 만들어보겠습니다.
만드는 순서
1. 상세 페이지 디자인하기
<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>
2. 디자인한 상세 페이지 component로 만들기
(Component.js)
function Detail() {
return (
<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>
);
}
export { Detail };
Component를 넣을 새로운 js 파일을 만들고, 디자인한 html을 component로 만듭니다.
그리고 만든 component는 export/import 문법을 사용해서 가져오도록 합니다.
3. 리액트 라우터로 상세 페이지 component 넣기
(App.js)
import { Detail } from './Component';
function App() {
let [shoes] = useState(data);
return (
<div className="App">
<Navbar bg="dark" data-bs-theme="dark">
(생략)
</Navbar>
<Routes>
<Route path="/" element={
<>
<div className="main-bg" style={{ backgroundImage: `url(${작명})` }}
></div>
<Container>
<Row>
{shoes.map(function (a, i) {
return <Card shoes={shoes} key={i} number={i} />;
})}
</Row>
</Container>
</>
}
/>
<Route path="/detail" element={<Detail></Detail>} />
</Routes>
</div>
);
}
네비게이션 바는 상단에 그대로 두고, 밑에 <Routes>를 넣어서 html을 수정합니다.
그러면 사이트 주소에 따라 네비게이션 바 밑의 html 요소가 변경이 되어, 페이지를 구분할 수 있습니다.
'React' 카테고리의 다른 글
React 쇼핑몰(리액트 라우터: URL 파라미터) (0) | 2023.07.06 |
---|---|
React 쇼핑몰(리액트 라우터: navigate, nested routes, oulet) (0) | 2023.07.06 |
React 쇼핑몰(import, export) (0) | 2023.07.05 |
React 쇼핑몰(Boostrap, 이미지, public 폴더) (1) | 2023.07.05 |
React 블로그(props) (0) | 2023.07.04 |