TIL042 React Session #2 Router

ルーティングは名前と同様に、パスを検索する役割を果たします.
特定のパス(url)に特定の画面を表示するロール
1. SPA

MPA:htmlファイルがページ数で存在する

SPA:MPAとは逆の概念.1ページのみ存在します.反応はスパ!

複数ページを1ページに表示する方法->ルート

2. Routing
パスによって異なるビューを表示

経路表示によって異なるビュー(すなわちurl表示によって異なる画面)は、応答がフレームワークではないライブラリであるため、ルーティング機能を個別に追加する必要があるが、可能である.

--保存パック.jsonに追加して、他の人にダウンロードしても操作できます.

reactrouterは反応器ルーティング機能で最もよく使われるライブラリ!

3. React Router
1)React Routerのインストールnpm install react-router-dom --save2)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)移動経路
ААА・ААААА

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から導入したもので、導入が必要です.

リンクラベルをaラベルに変換します.

どうせaタグに変換して、なぜlinkで包むのか.効率のために.aタグを使用すると、ドキュメントがサーバに要求されます.しかし,リンクを用いて画面の特定部分を変えるだけで効率的な画面切り替えが可能となる.パスを変更するだけで不要なレンダリングを回避できます.外部サイトに完全に移動する必要がある場合は、もちろんaタグを使用します.

✔withRouterhoc実施方法

高次ユニット:素子を囲む素子

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);