1. SPA

1) SPA(Single Page Application) : 페이지가 한 개인 어플리케이션

• 리액트는 라이브러리이기 때문에 자체적인 routing 기능이 없음

2. Routing

1) Routing: 다른 경로(url 주소)에 따라 다른 view(화면)를 보여주는 것

*프레임 워크: 주방(자체 기능과 도구가 정해져있음)

• 커스터마이징을 못함 but 안정적임
  *라이브러리: 프라이펜 한 개 (도구를 활용해 새로운 것을 만들어야 함)

• 자유도 면에서 장점을 얻을 수 있지만 외부의 도움을 받아야함(ex. third party)

  3. React Router

  1) react-router 설치

  npm install react-router-dom --save
  (--save: dependency에 올려라!) 
  

  2) Routes 컴포넌트 구현하기

import React from 'react';
import {
  BrowserRouter as Router,
  // BrowserRouter의 이름을 Router로 바꿔주겠다.
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Sig nup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
		<Nav />//NAV는 ROUTING 경로와 상관없이 보여주겠다.
        <Switch> // NAV는 경로에 따라 바꿔주겠다. 
          <Route exact path="/" component={Login} />
          //기본페이지를 로그인으로 두겠다. 
		  <Route exact path="/signup" component={Signup}/>
          //"/signup"이라는 경로일 때, signup 컴포넌트로 바꾼다.
          <Route exact path="/main" component={Main} />
        </Switch>
		<Footer />
      </Router>
    )
  }
}

export default Routes;

3) 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>
        // to(속성)=""로 연결 
      </div>
    )
  }
}

export default Login;

[특징]
1. <link>컴포넌트는 DOM에서 <a>로 변환(complie)
2. a태그와 link태그의 차이

• <a>: 새로고침o - 서버에 다시 요청을 해서 모든 값 재 렌더링
  => 외부 링크로 이동할 때 써줘야함
• <link>: 새로고침x - 바뀌는 부분에 대해서만 화면상에서 바꿔줌
  => 내부 프로젝트를 할 때 써주면 좋음

2. this.props.history.push()

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }//메서드 생성

  // 실제 활용 예시
  // 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>
      </div>
    )
  }
}

export default withRouter(Login);

[추가설명]

• withRouter(컴포넌트): 인자로 들어간 컴포넌트에 기능 추가
• this.props.history : router 내 Route로 전달받는 태그에 사용하는 메소드 > 3개의 객체를 받음
• withRouter 사용시기: route로 링크의 이동이 아닌 것에 사용하고 싶을 때 withRouter 사용

3.두 가지 방법의 활용법

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

4. Sass

1) 정의: sass(syntactically Awesome Style Sheets)? css 전처리기(css의 불편함을 해소하기 위해)
2) 목적: css 작업을 편안하게 하기 위해, 리액트로 import를 할 때 한 곳에 모이는 이슈 때문에 중복되는 경우 css를 핸들링 하기 위해 사용

nesting 기능

=> 스타일 요소를 묶어줘서 더욱 보기 좋게 만들 수 있다.