React : ) Router

1. SPA

SPA( Single Page Application )란?

페이지가 한 개인 애플리케이션

한 개의 웹페이지(html) 안에서 여러 개의 페이지를 보여주는 방법은? >>> Routing

SPA 장점

• 리액트 프로젝트에서 .html파일의 개수는 1개이다.
• SPA 형식은 빠른 반응성, 화면 전환 등의 측면에서 사용자 친화적
• 상대적으로 유지보수가 쉽고 개발속도가 빠르다.
• 전체 트래픽 양이 적다.

SPA 단점

• 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것
• 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문이다.

2. Routing

라우팅이란?
다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것

리액트 자체에는 라우팅기능이 없다.
npm install react-router-dom 받아야한다.
리액트가 프레임워크가아닌 라이브러리인 이유

3. React Router

React-router 는 리액트의 라우팅 기능을 위해 가장 많이 사용 되는 라이브러리이다.

Routes 컴포넌트 작성

Routes.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route,} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

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

export default Routes;

index.js

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

첨에는 <APP />이 디폴트값으로 설정되어있는데
CRA로 만든 앱에 routing 기능을 적용하려면 <Routes />바까주면됨

---

Route 이동하는 가지 방법

1. < Link> 컴포넌트 사용하는 방법

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


<Link to="/"></Link>

react-router-dom 에서 제공하는 < Link> 컴포넌트는 DOM에서 < a> 로 변환(Compile) 된다.

< Link>와 a태그의 차이점
<a> : 외부 링크로 이동할 경우
<Link> : React 프로젝트 내에서 페이지를 변경할 경우

2. this.props.history.push() 로 구현하는 방법

import React from 'react';
import { withRouter } from 'react-router-dom';

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }
  
  render() {
    return (
      <div>
        <button className="loginBtn" onClick={this.goToMain} >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

< Link>

• 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
• ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동

this.props.history.push()

• 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우
  (ex. 로그인 버튼 클릭 시)

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

import { withRouter } from 'react-router-dom';