React 쇼핑몰(리액트 라우터)

■ 리액트 라우터

리액트 라우터(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 요소가 변경이 되어, 페이지를 구분할 수 있습니다.