SPA

• SPA(Single Page Application)은 페이지가 1개인 어플리케이션을 뜻한다.
• HTML에서는 페이지 수만큼 HTML 파일이 존재하지만, React에서 .html 파일의 개수는 1개다. 즉, React는 SPA 기반으로 작동된다.
• 한 웹페이지 안에서 여러 개의 페이지를 보여줄 때 라우팅(routing)이 필요하다.
  참고: https://velopert.com/3417

Routing / React Router

• 라우팅이란 다른 경로(url 주소)에 따라 다른 화면(view)을 보여주는 것을 의미한다.
• React에 내장되어 있지 않은 Third-party library로 React-router는 React의 라우팅 기능을 위해 가장 많이 사용하는 라이브러리다.
• Router는 컴포넌트 URL에서 서버에 들어오는 클라이언트의 request 경로를 결정해 '보고싶은 부분만 변화'시켜 준다.

react-router 설치

npm install --save react-router-dom

Routes 컴포넌트 구현

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;

• react-router-dom을 설치하면 프로젝트에 router components를 import 할 수 있다.
• React Router는 여러 router components를 제공하는데, 가장 많이 쓰이는 것이 BrowserRouter다.
• 이 BrowserRouter를 상단 컴포넌트(top-level component)에 import 해준다. import { BrowserRouter as Router} from ‘react-router-dom’;
  => 페이지가 reload 될 때 URL이 바뀌는 것을 막아주고, URL이 바뀔 때 Router가 현재 props의 URL 경로에 따라 어떤 자식 컴포넌트를 보여줄 것인지를 결정할 수 있다.
• Route component는 현재 경로에 따라 작동하며, 각각의 route component는 1) Router 안에서 렌더링 되어야하며, 2) 렌더링 될 URL이 있는 path prop을 가져야 하며, 3) 그 path와 맞는 component를 감싸고 있어야 한다.
• 만약, router에 path가 없으면, 항상 렌더링 된다. 그러므로 현재 상태와 관계없이 사용자에게 보여주고 싶은 component라면 <Component />로 넣어주면 된다.

  <Route exact path>에서 'exact'를 넣어주는 이유는 exact가 없으면 '/'가 들어간 모든 페이지가 화면에 노출된다. 정확하게 '/', '/signup'만 보여줘!를 의미하는 것!

index.js

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

• CRA로 만든 앱에 라우팅 기능을 적용하려면 index.js를 수정해야 한다.
• 컴포넌트 대신 라우팅을 설정한 컴포넌트 로 변경해야 한다.

Route 이동하기

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

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link>
      </div>
    )
  }
}

export default Login;

• react-router-dom에서 제공하는 <Link> 컴포넌트는 DOM에서 <a>로 변환(Compile) 된다. cf. JSX - Babel - JavaScript
• <a> 태그와 마찬가지로 <Link> 태그도 지정한 경로로 바로 이동시켜주는 기능을 한다.
• <Link>는 to prop을 갖는다. (=href)
  cf) <a> vs <Link>
<a> - 외부 사이트로 이동하는 경우
  <Link> - 프로젝트 내에서 페이지 전환하는 경우

  <a> 태그는 페이지를 새로 불러오면서 앱이 초기화되는 렌더링을 해 상태 값을 잃고 속도가 저하될 수 있다. <Link> 컴포넌트는 HTML History API를 사용해 브라우저의 주소만 바꿔준다.

cf. NavLink

• <Link>와 같이 페이지를 전환하는 경우 사용할 수 있으며 이 때 링크는 자동적으로 'active' 클래스를 적용한다.
• 네비게이션 메뉴, CSS style에서 .active를 적용해 active와 inactive를 구분해야하는 링크에 유용하게 적용할 수 있다.
• activeClassName을 적용해 따로 클래스명을 줄 수 있다.

2. this.props.history.push()로 구현

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

class Login extends React.Component {
  
  goToMain = () => {
    if(response.message === "valid user") {
      this.props.history.push('/main');
   } else {
     alert ("회원 가입을 해주세요");
     this.props.history.push('/signup');
   }
 }
  
  render() {
    return (
      <div>
       <button
         className="loginBtn"
         onClick={this.goToMain}
	   > 로그인
	   </button>
    )
  }
}

export default withRouter(Login);

• JavaScript 로직에서 이동이 필요한 경우 쓴다.
• 받은 history의 push 메서드의 인자로 Routes.js에서 설정한 path를 넘겨주면, 해당 라우트로 이동할 수 있다.
• Route에 연결되어 있지 않은 컴포넌트에서 props에 route정보(history)를 받으려면 export하는 컴포넌트를 withRouter로 감싸주어야 한다.
  => withRouter와 같이 해당 컴포넌트를 감싸주는 것을 Higher Order Component(HOC)라고 한다.

두 가지 방법의 활용

1. <Link>

• 클릭 시 바로 이동하는 로직 구현시 사용한다.
  ex) Navigation bar, Aside, 아템 리스트 페이지에서 아이템 클릭 시 상세페이지 이동 등

2. this.props.history.push()

• 페이지 전환시 추가로 처리해야 하는 로직이 있는 경우 사용한다.
  ex) 로그인 버튼 클릭시
  - Backend API로 데이터(User Info) 전송
  - User Data 인증 / 인가
  - response message
  - Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
  - Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동