Router

1. SPA

: Single Page Application

SPA는 말 그대로 '페이지가 하나인 어플리케이션'을 의미한다.

우리가 지금까지 기존 HTML로 만들어온 것들은 MPA(Multi Page Application)이다. 프로젝트 폴더를 살펴보면 페이지 수만큼의 html 파일을 갖고있지 않은가. 이걸 바로 MPA라고 부른다.

반면에 CRA로 생성한 React 폴더 안에는 html 파일이 index.html 하나 뿐이다. 대신 여러 컴포넌트가 js 파일 속에 존재하여 한 페이지 위에 그것들을 갈아 끼워준다.

이렇게 한 페이지를 여러 페이지인 것 마냥 보여주는데 필요한 것을 Routing이라 부른다.

(+) React가 무조건 SPA만 만드는 것은 아니다. 우리가 그렇게 사용하고 있을 뿐.

2. Routing

: 다른 경로(url)마다 다른 화면(view)을 보여주는 것.

프레임워크인 Angular, Vue와 다르게 라이브러리인 React는 Router가 내장되어 있지 않다. 따라서 Third-party Library를 다운받아야만 한다.

React-router는 그 중 가장 대중적인 Router이다.

3. react-router

1) 설치

npm install react-router-dom --save

2) Router.js

//파일 경로: src > Router.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./pages/Login/Login";
import Main from "./pages/Main/Main";

class Routes extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route path="/main" component={Main} />
                </Switch>
            </Router>
        )
    }
}

export default Routes;

//v6.0.0
const IndexRoutes = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Login />} />
                <Route path="/main" element={<Main />} />
           </Routes>
        </Router>
    )
}

(+) path에 exact가 붙으면 url이 '정확하게' 일치해야 한다. -> 6.0.0 버전에서는 알아서 exact로 인식하므로 붙일 필요가 없다!

※ react-router-dom 6.0.0 버전이 풀리면서 Switch대신 Routes를 써야한다. 그 외에도 이것저것 바뀌었으니 무조건 확인할 것!

3) index.js

//import 추가
import Routes from "./Routes";


ReactDOM.render(<Routes />, document.getElementById("root"));

4. Routing 적용법

1) <Link> 컴포넌트

//import 추가
import { Link } from "react-router-dom";

//실제 render() 속
<Link to="/"> </Link>

<Link> 컴포넌트는 F12를 눌러보면 Babel에 의해 <a> 태그로 바뀌어 출력된다.

※ <Link> vs <a>

<Link>는 React 프로젝트 내에서 페이지를 변경할 경우,
<a>는 외부 링크로 이동할 경우 사용된다.

2) this.props.history.push()

class Login extends React.Component {
    goToMain = () => {
        this.props.history.push("/main");
    }

    render() {
        return (
            <div>
            	<button className="login-button" onClick={this.goToMain}>로그인</button>
            </div>
        )
    }
}

<Link> 컴포넌트와 다르게 로직 추가를 자유롭게 할 수 있다는 장점이 있다.

3) withRouter

Routes.js에서 지정되지 않은 컴포넌트들의 Route를 지정해줄 때 사용한다.

//import 추가
import { withRouter } from "react-router-dom";

//최하단 export
export default withRouter(컴포넌트명);