[리액트] 리액트 라우터 1 : 셋팅이랑 기본 라우팅

페이지를 나누고 싶으면

일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 

근데 리액트는 html 파일을 하나만 사용합니다.(index.html)

그래서 리액트에선 누가 다른 페이지 요청하면 그냥 내부에 있는 <div>를 갈아치워서 보여주면 됩니다. 

근데 직접 코드짜면 귀찮으니 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 일반적이라 그렇게 해봅시다. 

 

react-router-dom 설치하려면 

 

외부라이브러리라서 설치 셋팅하는 법은

react-router-dom 홈페이지 들어가서 그대로 따라하면 되는데 그냥 알려드리자면 

 

터미널 열어서 

npm install react-router-dom@6 입력해서 설치합니다.

 

 

셋팅은 index.js 파일로 가서 

 

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/> 이걸 감싸면 끝입니다. 

 

react-router-dom 같이 경로가 없는 것은 대부분 설치한 라이브러리임 !!

 

 

 

라우터로 페이지 나누는 법 

 

다른 웹사이트를 잘 살펴보면 

codingapple.com/어쩌구로 접속하면 A페이지를 보여주고 

codingapple.com/저쩌구로 접속하면 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. 우선 상단에서 여러가지 컴포넌트를 import 해오고 

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

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

 

<Route/>는 페이지임 !!! 페이지 4개가 필요하다?  그러면 <Route/>를 4개 쓰면 되는 것임 !

그래서 방금 페이지 2개 만든 것임 

진짜 페이지 보이나 url 뒤에 /about 입력해보고 /detail 도 입력해보십시오.

 

 

 

 

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

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

 

Q. 저는 메인페이지 접속시에만 상품목록 보여주고 싶습니다 

A. 그럼 element={ } 안에 상품목록 레이아웃 다 넣으면 되는거 아닙니까 

 

 

 

 

<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> 
  </>
} /> 

이러면 메인페이지 접속시에만 상품목록이 보이고

나머지 /detail 그리고 /about 페이지에선 안보이겠군요. 

이렇게 페이지에서 보여줄 html 내용은 마음대로 작성하면 됩니다. 

 

 

 

 

페이지 이동 버튼은

 

유저들은 주소창에 url 입력해서 들어가지 않고 링크타고 들어갑니다. 

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

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

 

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

이러면 각각 url 경로로 이동하는 링크를 생성할 수 있습니다.

진짜 이동하는지 눌러봅시다. 

 

 

오늘의 숙제 :

/detail로 접속하면 보여줄 상세페이지를 컴포넌트를 이용해서 만들어오십시오. 

코드 너무 기니까 다른 파일에 작성해봅시다.

 

<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>

붙여넣으면 상세페이지같은 레이아웃이 하나 생성됩니다.

이거 쓰셈 

 

Detail.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 default Detail;

App.js에서 import하고서 element에 넣으면 Detail 컴포넌트의 내용을 보여줌 !!