SPA

Single Page Application
페이지가 1개인 어플리케이션,
기존에는 login.html / Main.html 등의 형태였다면
리액트 프로젝트에서는 1개의 html 파일로 구성되며
이같은 방법이 가능한 이유에는 Routing 이라는 기술로
여러개의 페이지를 보여주는 방법이 사용된다.

Routing

다른 경로(URL)에 따라
다른 화면(View)를 보여주는 것.

React Router

Third-party Library중 하나인 React-Router가 리액트의
위 설명의 라우팅 기능을 위해 사용된다.
설치 방법 : npm install react-router-dom --save

Routes Component

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

import Login from './pages/Ex01';
import Signup from './pages/Ex02';
import Main from './pages/Ex03';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Ex01} />
					<Route exact path="/signup" component={Ex02}/>
          <Route exact path="/main" component={Ex03} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

Route 이동

Link

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/ExToLink">링크 예시</Link>
      </div>
    )
  }
}

export default Ex01;

클릭 시 바로 이동하는 로직 구현 시 사용
Nav bar, Aside Menu, Item List 페이지 아이템 클릭 시,
상세페이지로 이동 등

Tag a vs Tag Link

a tag는 외부 사이트로 이동하는 경우
Link tag는 프로젝트 내에서 페이지 전환을 하는 경우에 해당

withRouterHOC

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/Ex02');
  }

  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          HOC 예시
        </button>
      </div>
    )
  }
}

export default withRouter(Ex01);

페이지 전환 시 추가로 처리해야하는 로직이 있는 경우에 사용
버튼 클릭시 인증/인가 등

Sass

React에서 사용되는 css 확장 언어.

Nesting

Sass의 가장 기본적인 기능으로,
부모-자식 요소로서 css 속성을 구분할 수 있다.