SPA

Single Page Application 으로 말 그대로 페이지가 한 개인 애플리케이션을 말한다. 리액트 프로젝트에서는 .html 파일의 개수가 1개이다.
그러면 페이지는 하나인데 어떻게 여러 개의 페이지를 보여주냐?
한개의 웹페이지안에서 여러 개의 페이지를 보여주기 위해서는 routing을 사용한다.

Routing

라우팅이란 경로에 따라 다른 view를 보여주는 것이다. Routing 은 리액트 자체에 내장되어 있지않아서 설치를 따로 해야한다.
이런것을 보면 리엑트는 프레임워크가 아니라 라이브러리라는 것이 확실한거같다.

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

React Router

create React App(CRA)에 특별히 라우팅을 위한 로직이 들어있지 않기 떄문에, 가장 인기 있는 routing soliuution인 react-router를 추가해서 구현한다.

npm install react-router-dom --save

Router 컴포넌트 구현

import React from 'react';
import{
browserRouter as Router , Switch, Route, } from 'react-router-dom';
import Login from '로그인 페이지 경로';
import Main from '메인 페이지 경로;'

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

Route 로 이동하기

1 . 컴포넌트 사용하는 방법
2 . withRouterHOC로 구현하는 방법

Link 컴포넌트 사용

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

class Login extends React.Component {
	render(){
    	return(
        <div>
        	<Link to="/main"><Link>
        </div>
        )
    }
}
export default Login;

react-router-dom에서 제공하는 Link컴포넌트로 dom에서 a태그로 변환된다.

a태그와 Link의 차임점!!!!

• a태그는 외부 사이트로 이동하는 경우
• link는 프로젝트 내에서 페이지 전환을 하는 경우

withRouterHOC

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

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

 render() {
 	return(
    	<div>
  	<button className = "loginBtn" onClick={this.goToMain}>로그인</button>
		</div>
    )
 }
 export defalut withRouter{Login};

Link를 사용하지 않고 요소에 onClick 이벤트를 통해 이동할 수 있다.
goToMain 이라는 eventhandler에서 구현한 것처럼 props 객체의 history에 접근하여 이동할 수 있다.

3-4-3. 두 가지 방법의 활용법

1. • 클릭 시 바로 이동하는 로직 구현 시에 사용합니다.
   • ex. Nav Bar, Aside Menu, 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지로 이동
2. withRouterHOC
   • 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현합니다.
   • ex. 로그인 버튼 클릭 시
     • Backend API로 데이터(User Info) 전송
     • User Data 인증 / 인가
     • response message
     • Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
     • Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동