리액트 - 라우터

페이지를 나눌 때 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 리액트는 html 파일을 하나만 사용한다. 'react-router-dom' 이라는 외부 라이브러리 설치해서 구현하면 쉽게 페이지를 나눌 수 있다.

npm install react-router-dom@6

사용 전에 역시 라이브러리를 다운받아야 한다. 터미널을 켜서 위 코드를 입력한다.

그리고 셋팅은 index.html에서

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

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

import ~~~ 해주고 <BrowserRouter>로 <App />을 감싸주면 된다.

라우터로 페이지 나누는 법

 (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. 우선 상단에서 여러가지 컴포넌트를 import 해오고

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

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

위 처럼 하면 'www.어쩌구/detail' 은 상세페이지, 'www.어쩌구/about'은 어바웃페이지를 보여주게 된다. 그리고 path 값이 "/"이면 메인페이지, "*"이면 404페이지(없는 페이지)이다.

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

<Link> 태그는 페이지 이동 버튼이다. 만약 기존 태그에 페이지 이동 기능을 넣고싶다면

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

이렇게 useNavigate를 사용하면 된다.

서브 경로

만약 '/about/member'는 멤버에 대한 페이지, '/about/location'은 지역에 대한 페이지를 보여주고 싶다면

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

이렇게 만들어도 되겠지만 서브 경로가 많아지면 <Route> 태그가 많아져 가독성이 떨어진다. 그래서

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

이렇게 <Route>태그 안에 <Route>태그를 넣을 수 있다. 이를 Nested routes 라고 한다. 그런데 이렇게만 해서는 div태그들이 보이지 않는다. 왜냐하면 저 element를 어디에 보여줄지 명시하지 않았기 때문이다.

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

이렇게 부모 라우터의 element에 <Outlet>태그를 통해 어디에 보여줄지 명시해 줘야 한다.

파라미터

현재 코딩애플 강의에서 쇼핑몰 페이지를 만들고 있는데 상품에 따른 상세 페이지를 보여주려고 한다.

<Route path="/detail/0" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/1" element={ <Detail shoes={shoes}/> }/>
<Route path="/detail/2" element={ <Detail shoes={shoes}/> }/> 

이렇게 id(0,1,2)에 따라 다른 페이지를 보여주려면 위처럼 할 수도 있지만 상품이 많아지면 <Route>태그도 그만큼 많아진다.

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

그래서 이렇게 하면 id에 따른 상세페이지를 보여줄 수 있는데 그럼 이 파라미터 id를 어떻게 사용하냐?

import { useParams } from 'react-router-dom'

function Detail(){
  let {id} = useParams();
  console.log(id)
  
  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 mt-4">
        <h4 className="pt-5">{props.shoes[id].title}</h4>
        <p>{props.shoes[id].content}</p>
        <p>{props.shoes[id].price}원</p>
        <button className="btn btn-danger">주문하기</button>
      </div>
    </div>
  </div>
  )
}

이렇게 useParams()라는 함수를 상단에서 import하고 let {id} = useParams();로 id에 파라미터값을 가져올 수 있다.