[React] React Router : 셋팅 후 기본 라우팅해보기

💡 실습 포인트!

💜 메인 페이지( 경로 : / )

---

💜 상세 페이지 ( 경로 : /detail )

---

💜 React Router 셋팅 후 기본 라우팅해보기

• 여러가지 페이지를 만들고 싶을 때에는 Router 를 이용하면 되는데, 이는 react-router-dom 이라는 공식 라이브러리를 설치를 통해 이용이 가능하다.

🤍 React Router 설치 및 셋팅

// npm 이용하는 방법
npm install react-router-dom@5.2.0

// yarn 이용하는 방법
yarn add react-router-dom@5.2.0

• 터미널에 위 두 코드 중 하나를 입력해서 설치하면 된다.
• yarn 으로 시작하는 코드를 사용하기 위해서는 미리 yarn 이 설치되어 있어야 한다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'; // 추가

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter> // 추가
      <App />
    </BrowserRouter> // 추가
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• 설치가 완료되면 index.js 파일의 기존 코드에 위와 같이 몇 가지 코드를 추가해준다.

---

📌 HashRouter

• 셋팅할 때 BrowserRouter 말고 HashRouter 태그를 이용할 수도 있다.
• Browser 라는 단어 대신 Hash 로 바꿔주면 사용이 가능하다.
• BrowserRouter 와 HashRouter 의 차이점은 다음과 같다.
  • HashRouter 를 사용했을 때에는 사이트에 접속 시  URL 맨 끝에 /#/ 이 붙은 채로 시작한다.
  • BrowserRouter 를 사용했을 때에는 사이트에 접속 시 URL 이 깔끔하다.
• 그럼에도 HashRouter 를 사용하는 이유는 다음과 같다.
  • 브라우저 주소창에 어떤 페이지를 입력하는 행위는 서버에 해당 페이지를 보여달라는 요청이다.
  • 현재 내가 만드는 프로젝트는 요청할 서버가 없고 리액트가 라우팅을 담당하므로, 잘못해서 있지도 않은 페이지를 서버에 요청하면 에러가 뜰 수 있다.
  • 브라우저 주소창에서 # 뒤에 붙은 내용은 절대 서버로 요청되지 않으므로, 실수로 서버에 요청하지 않으려면 안전하게 # 을 붙여주는 게 좋으며 그 역할을 HashRouter 가 해주는 것이다.
• 그렇다고 해서 꼭 HashRouter 를 사용해야 하는 것은 아니고, BrowserRouter 를 사용할 때 특정 경로에서 들어오는 요청은 리액트에서 처리할 수 있도록 API 를 만들어놓으면 된다. 즉, 서버에서 셋팅만 잘해주면 된다.

---

🤍 라우팅으로 페이지 나누기

• / 경로로 접속하면 메인 페이지로, /detail 경로로 접속하면 상세 페이지로 접속이 되도록 해보자.

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

 

• 라우팅을 해주기 전에 먼저 App.js 파일에 위와 같이 여러가지 태그들을 import 해주어야 한다.

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

function App(){
  return (
    <div>
      <Route exact path="/"> 
        <div>메인 페이지</div>
      </Route>
      <Route path="/detail">
        <div>상세 페이지</div>
      </Route>
    </div>
  )
}

• 다음으로 라우팅을 하기 위해 원하는 곳에 <Route></Route> 태그를 작성하고 <Route> 안에 path 와 path 방문시 보여줄 HTML 을 적어주면 된다.
• 이 때 "메인 페이지" 문구를 보여줄 <Route> 안의 path 에는 exact 를 붙여서 정확하게 / 경로로 접속해야지만 메인 페이지가 보이게 해주었다.
  (exact 를 사용하지 않으면 /detail 이라는 경로에 / 라는 문자가 포함되어 있으므로 "메인 페이지" 라는 문구와 "상세 페이지" 라는 문구를 모두 보여주게 되며, React Router 는 원래 이렇게 동작한다.) 
• 이제 브라우저 주소창에서 / 경로로 접속하면 "메인 페이지", /detail 경로로 접속하면 "상세 페이지" 라는 문구를 볼 수 있다.

<Route path="/grid" component={ Grid } ></Route>

• 위와 같이 코드를 작성해서 /grid 라는 경로로 접속했을 때 만들어놓은 Grid Component 를 보여줄 수도 있다.

<Route path="/grid"> <Grid/> </Route>

• 물론 component 속성 없이 <Route></Route> 태그 사이에 Grid Component 를 추가해주어도 된다.

---

📌 React Router 의 특징

• 각 페이지마다 다른 HTML 파일을 보여주는 게 아니라 HTML 파일 내부의 내용을 바꾸어 다른 페이지를 보는 것처럼 흉내내는 것이다.

---

🤍 메인 페이지와 상세 페이지 Route 에 내용 채우기

• 메인 페이지는 Router 를 사용하기 전과 동일하게 위와 같은 화면이 나올 수 있게 해주었다.

import React, {useState} from 'react';

function Main(props) {

    return (
        <>
        {/* Main */}
        <div className="main-visual">
          <h2>Welcome to visit SHOES.COM!</h2>
          <hr/>
          <h1>20% Season Off</h1>
          <button>SHOP THIS DEAL</button>
        </div>

        {/* Grid */}
        <div className="container">
          <div className="row">

            {
            props.shoes.map((item, idx)=>{
              return (
                <Grid shoes={props.shoes[idx]} key={idx} />
                )
              })
            }

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

function Grid(props) {
    return (
      <div className="col-md-4 grid">
        <img src={`https://codingapple1.github.io/shop/shoes${props.shoes.id + 1}.jpg`} />
        <h5>{props.shoes.title}</h5>
        <p>{props.shoes.content} & {props.shoes.price}</p>
      </div>
    )
}

export default Main;

• 화면상으로는 동일하지만 페이지를 분리하는 게 목적이었으므로 <Route></Route> 를 이용해야했다.
• <Route></Route> 안에 기존에 작성해둔 메인 페이지의 내용을 넣으려니 너무 많아서 Navbar 를 제외하고 메인 페이지에 필요한 내용만 담은 Main.js 파일을 생성해주었다.
• Main.js 파일에서 Main 이라는 Component 를 만든 후 Main 이라는 변수명으로 export 해주었다.

// 전체 코드 미리보기
// 전체 코드가 길어서 불필요한 부분은 제외했다.

import Main from './Main'

function App() {

  let [shoes, setShoes] = useState(Data);
  
  return (
    <div className="App">

          {/* Main */}
          <Route exact path='/'>
            <Main shoes={shoes}/>
          </Route>
    
    </div>
  );
}

• 이제 App.js 에서 Main.js 파일에서 Main 이라는 Component 를 import 해주었다.
• 그다음 <Route></Route> 태그 사이에 Main Component 를 넣어주었다.
• 이 떄, Main Component 에서 shoes 라는 state 를 받아 사용할 수 있도록 shoes 라는 변수명으로 shoes 라는 state 를 전송해주었다.
  (Main.js 에서는 Main Component 에 props 라는 파라미터로 shoes 를 받아오면 된다.)

 

<div className="container">
      <div className="row">
        <div className="col-md-7">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-5 mt-4">
          <h4 className="pt-5">White and Black</h4>
          <p>Born in France</p>
          <p>120000</p>
          <button className="btn btn-danger mx-1">주문하기</button> 
          <button className="btn btn-danger mx-1">뒤로가기</button> 
        </div>
      </div>
</div>

• 상세 페이지는 나중에 분리할 예정이라 위 코드를 <Route></Route> 안에 바로 작성해주었다.