React - 라우팅

페이지를 나누고 싶으면 기존의 html css js 에서는 html 파일 여러개를 만들었습니다.

근데 리액트에서는 html 파일을 하나만 사용합니다. 

누가 다른 페이지 요청하면 내부에 있는 <div>를 갈아치워서 보여주면 됩니다. 이러한 코드를 직접 짜면 되는데 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 보통 일반적입니다.

 

설치방법

터밀널을 열어서 npm install react-router-dom@6 입력해서 설치합니다. 

 

셋팅은 index.js 파일로 가서 <BrowserRouter> 이걸로  <App/> 이걸 감싸면 끝입니다.

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
);

 

 

라우터로 페이지 나누는 법

일반적으로 다른 현재 운영중인 다른 웹사이트를 살펴보면 

.../a 로 접속하면 어떤 페이지를 보여주고 

.../b 로 접속하면 다른 페이지를 보여줍니다. 이런식으로 url 경로마다 다른페이지를 보여주고 싶으면 아래와 같이

작성합니다.

 (App.js)

import { Routes, Route, Link } from 'react-router-dom'

function App(){
  return (
    ...
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

1. 우선 상단에서 여러가지 컴포넌트(Routes, Route, Link)를 import합니다.

2. <Routes>만들고 그 안에 <Route>를 작성합니다. 

3. <Route path="/url경로" element={<보여줄html>}/> 이렇게 작성합니다. 

 

 

<Route path="/" element={ <div>메인페이지에서 보여줄것들 </div> } />

위의 url경로는 메인페이지입니다. 

메인페이지에서 상품목록을 보여주고 싶으면 element={} 안에 상품목록 레이아웃을 다 넣으면 됩니다.

아래와 같이 하면 메인페이지 접속시에만 상품 목록이 보이고 나머지 /detail , /about에서는 안보입니다. 

<Route path="/" element={
   
      <div>
        <div className="main-bg" style={{ backgroundImage: 'url(' + bg + ')' }}></div>
        <div className="container">
          <div className="row">
            {
              props.shoes.map(function (a, i) {
                return (
                  <ShoeItem index={i} shoes={props.shoes}></ShoeItem>
                )

              })
            }
          </div>
        </div>
      </div>

 

 

페이지 이동 버튼

보통 사용자들은 주소창에 url을 입력해서 들어가지 않고 링크를 타고 들어갑니다.

링크를 만들고 싶으면 react-to-router-dom에서 Link 컴포넌트 import 해오고 

원하는 곳에서 <Link> 쓰면 됩니다.

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

메인페이지입니다. 상단에 상세페이지를 클릭해보면 

상세페이지로 잘 넘어가집니다.

 

 

메인페이지 컴포넌트로

위의 Route의 element안의 main page html 코드를 컴포넌트로 작성하여 좀 더 깔끔한 코드로 구현하겠습니다. 

컴포넌트를 먼저 만들어주겠습니다. 위의 코드를 return() 안에 옮기면됩니다. 

그리고 호출하는 부분에서 컴포넌트를 사용하면되는데 처음에 오류가 발생했습니다. shoes때문이었습니다. 보시면 컴포넌트안의 shoes가 props로 넘겨주는 역할을 하고 있는데 여기서 한번더 props를 호출해주어 해결했습니다. 

<Route path="/" element={
          <MainPage shoes={shoes}></MainPage>
        } />
...

function MainPage(props) {
  return (
  
      <div>
        <div className="main-bg" style={{ backgroundImage: 'url(' + bg + ')' }}></div>
        <div className="container">
          <div className="row">
            {
              props.shoes.map(function (a, i) {
                return (
                  <ShoeItem index={i} shoes={props.shoes}></ShoeItem>
                )

              })
            }
          </div>
        </div>
      </div>

  )
}

추가적으로 상세페이지도 컴포넌트로 만들어주었습니다.

function DetailPage(props) {
  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>
  )
}

 

 

Link디자인

아까 생성한 Link를 nav에 넣어주었습니다. 

그리고 css를 설정해주는데 link태그는 가상의태그라서 a태그를 변경해주면 되었습니다. 밑줄을 제거하고 padding을 주었습니다. 

<Navbar bg="primary" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Shoe Shop</Navbar.Brand>
          <Nav className="me-auto">
            <Link className="navlink" to="/">홈</Link>
            <Link className="navlink" to="/detail">상세페이지</Link>
          </Nav>
        </Container>
      </Navbar>

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌