TIL042 React Session #2 Router

라우팅은 이름과 같이 경로를 찾아주는 역할을 한다.
특정경로(url)에서 특정화면을 보여주는 역할

1. SPA

• MPA: 페이지 수 만큼 html파일이 존재하는 것
• SPA: MPA의 반대 개념. 한페이지만 존재. 리액트는 SPA!
• 한 개의 웹페이지 안에서 여러개의 페이지를 보여주는 방법은? -> 라우팅

2. Routing

경로에 따라 다른 뷰를 보여주는 것

• 경로에 따라 다른 뷰(즉 url에 따라 다른 화면)을 보여주는 것은 리액트가 프레임워크가 아닌 라이브러리이므로 라우팅 기능을 따로 추가해야지만 가능하다.
• --save는 package.json에 추가해서 다른 사람이 다운받아도 동작이 가능하도록 한다.
• react router는 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리이다!

3. React Router

1) React Router 설치

npm install react-router-dom --save

2) Routes 컴포넌트 구현하기

import React from 'react'; //리액트에서 리액트를 가져옴
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom'; //react-router-dom에서 위 파일들을 임포트
//as는 우리가 지정한 이름
//각 컴포넌트를 불러오기(순서대로 임포트하기)
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
import Nav from './components/Nav';

//라우트라는 컴포넌트를 만든것. 랜더라는 메서드가 꼭 들어감. 리턴 밑이 실제로 구현되는 화면
class Routes extends React.Component {
  render() {
    return (
      <Router> //안쪽의 내용에 대해 라우팅 기능을 제공하겠다는 의미
		<Nav /> //url의 변동에도 그대로 보여지는 컴포넌트
        <Switch> //아래 세 컴포넌트 중에 하나를 고르겠다는 의미
          	<Route exact path="/" component={Login} />
			<Route exact path="/signup" component={Signup}/>
          	<Route exact path="/main" component={Main} />
          //exact: exact는 path 속성에 넣은 경로값이 정확히 URL의 경로값과 일치할 때만 렌더링
          //path: url 지정
          //component: 해당 컴포넌트를 렌더링
        </Switch>
		<Footer />
      </Router>
    )
  }
}
// <>로 묶인 건 모두 컴포넌트. 
// 컴포넌트 안의 속성들 = props

export default Routes; //defalut export
//여기서 익스포트를 했기에 index.js에서 임포트할 수 있다.
//named export: 중괄호를 이용한 export(export { Routes }, 이렇게 export한것은 import할때도 중괄호를 사용해야함), 여러개를 내보낼 때 사용한다.

3) 라우트 이동하기

✔️ <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;

• <Link />는 react-router-dom에서 가져오는 것이기 때문에 import 해줘야한다.
• Link 태그는 a태그로 전환된다.
• 어차피 a태그로 전환되는데 왜 link로 감싸줄까?: 효율을 위해서. a태그로 하게 되면 서버에 문서를 요청하게 됨. 그런데 Link를 이용하면 화면의 특정부분만 바꿔주면 되는 경우에 효율적인 화면 전환을 할 수 있다. 단순히 경로만 바꿔 불필요한 렌더링을 피한다. 완전히 외부사이트로 가야할때는 당연히 a태그를 사용해야한다.

✔️ withRouterHOC 로 구현하는 방법

• HOC(Higher Order Component): 컴포넌트를 감싸는 컴포넌트

import React from 'react';
import { withRouter } from 'react-router-dom';
//withRouter는 HOC이다.

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }
  //this를 사용할때는 꼭 애로우 펑션을 사용한다. 그러면 여기서는 무조건 로그인을 가리킴
  //함수를 사용하는 이유는 조건문을 활용하기 위해서라는 이유가 가장 큼

  // 실제 활용 예시
  // 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}
        >
          //랜더안이 아닌 클래스 로그인에 있는 함수니까 this
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);