SPA

• Single Page Application의 약자로 페이지가 1개인 어플리케이션을 말한다.
• 전통적인 웹어플리케이션의 구조는 여러 페이지로 구성되어져 있다. 유저가 요청할 때마다 서버로부터 리소스를 전달 받아서 렌더링을 해왔다. 하지만 이러한 면은 정보가 많은 요즘의 웹에서는 속도적인 측면에도 문제가 되며, 렌더링하는 만큼 서버의 자원이 사용되어 불필요한 낭비가 발생하게 된다.

그래서 SPA라는 개념이 나타나게 되었는데, 기존의 방식대로 서버가 페이지 구성에 필요한 리소스를 매번 전송하는 것이 아니라, 파일은 처음에 한번 송수신 하고 그 뒤로는 실시간 데이터만 주고받게 되는 것이다.

이렇게 제일 처음 전송된 단일 HTML 페이지에 포함되어 있는 JS에서 필요한 데이터를 서버로 부터 호출하여 화면을 새롭게 구성해주는 방식이 되는 것이다.

Routing

• 라우팅은 다른 경로 (url 주소)에 따라 다른 화면을 보여주는 것

React-Router

• 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';

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

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

export default Routes;

<Route path="주소규칙" component={보여주고싶은 컴포넌트}>

3. Routes 컴포넌트 index.js 에 import시키기

ReactDOM.render(<Routes />, document.getElementById('root'));

• CRA로 개발 환경을 세팅했을 경우 routing 기능을 적용하기 위해서는 index.js를 수정해야한다.