오늘은 react router 세션을 듣고 로그인 페이지 리액트로 옮긴 것처럼 메인 페이지도 리액트로 옮기도록 하겠다.

(session) react-router / sass

SPA(Single Page Application)

• SPA(Single Page Application) - 페이지가 한 개인 애플리케이션
• 리액트 프로젝트에서는 .html의 개수는 1개

Routing

• 라우팅이란 다른 경로(url 주소)에 따라 다른 **View(화면)**을 보여주는 것
• 리액트 자체에는 이러한 기능이 내장되어있지 않다. 그래서 리액트는 라이브러리다!!
• Third-party Library

React Router

• CRA에 특별히 routing을 위한 로직이 들어있지 않기 때문에 관련된 패키지를 설치해서 사용해야 합니다. ex) react-router <- 가장 인기!

react-router 설치

npm install react-router-dom --save

Routes 컴포넌트 구현하기

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

import Login from './Pages/Login/Login.js';
import Main from './Pages/Main/Main.js';

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

index.js에서 변경

Route 이동하기!!

Route 이동하는 두 가지 방법(Link, HOC)

<Link >

import { Link } from 'react-router-dom';
...
	<div>
		<Link to="/signup">
    </div>

<Link />태그는 a태그로 변환 됩니다.

그렇다면 <Link /> 와 <a> 똑같은거 아닌가??

똑같아 보이지만 두개는 다른 특징을 가지고 있다.
<a> 태그는 다른 외부 사이트로 이동
<Link /> 태그는 프로젝트 내에서 페이지 전환이 필요할 경우

JSX -> Babel -> JavaScript

withRouterHOC

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

class Login extends React.Component {
  LoginCheck = () => {
    if( id === dbId && pw === dbPw )
      this.props.history.push('/main');
    else
      alert("아이디 or 비밀번호가 정확하지 않습니다.")
  }
  
  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.LoginCheck}
        >
          로그인
        </button>
      </div>
    )
  }
}
export default withRouter(Login);

위의 코드는 예를 들어 설명한건데 withRouter를 export default withRouter(component name) 해서 사용해줘야한다.
<Link />와의 차이점은 단순하게 프로젝트 내에서 이동하는게 아닌 무엇인가 조건이나 처리를 하고 이동을 해야할 때 사용한다. ex) 로그인 성공했을때만 main 화면으로 이동

westagram 리액트로 옮기는 작업중..