SPA (Single Page Application)

'싱글 페이지 앱(SPA)'이 멀티 페이지 앱과 가장 큰 차별점은 다음과 같습니다.

"앱을 navigation할 때 완전 새로운 페이지가 로딩되는 일이 없다!!"

그 대신에 페이지 안에서 인라인으로 View를 로딩하는 것이죠!!

• SPA로 개발할 때 신경써줘야 할 부분 -

1. 주소 표시줄의 URL은 항상 지금 보고 있는 화의 진짜 URL과 같아야 함.

2. 브라우저의 이전/다음 버튼을 사용 가능해야 함.

3. 정확한 URL을 사용해 특정 View를 바로 볼 수 있어야 함.

* 멀티 페이지 앱(MPA)에서는 전혀 신경쓰지 않아도 되는 부분을 신경써줘야 한다는 얘기 ㅜ

 

이 모든 걸 처리하기 위해서 라우팅(Routing) 을 사용해야 합니다. 라우팅은 URL을 물리적인 페이지 (Multi Page Application의 여러 페이지들)이 아닌 SPA의 특정 뷰와 매핑하는 기법입니다. 리액트는 View만 관리한다고 했었죠?!

앵귤러같은 라우터가 내장된 프레임워크가 아니라 라우터 패키지를 설치해야합니다.

 

이 라우팅을 위해 'React Router' 이라는 라이브러리를 사용합니다.

 

react-router-dom 패키지 설치

npm insatll react-router-dom --save

 

리액트 라우터는 '라우팅 영역'이라 정의하고 작동합니다. 그 영역 안에서는 2가지가 존재하는데

 

1. 네비게이션 링크 (navigation link)

 

2. 콘텐츠(각 Page)를 로딩하는 컨테이너

 

import React, { Component } from 'react'
import {Route, NavLink, HashRouter} from 'react-router-dom'
import Home from './Home'
import Contact from './Contact'
import Stuff from './Stuff'

class Main extends Component {
  render() {
    return (
      <HashRouter>
      <div>
        <h1>
            Simple SPA
        </h1>
        <ul className="header">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/stuff">Stuff</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
        </ul>
        <div className="content">
            <Route exact path="/" component={Home}/>
            <Route path="/stuff" component={Stuff} />
            <Route path="/contact" component={Contact}/>
        </div>
      </div>
      </HashRouter>
    )
  }
}

export default Main

HashRouter 

HashRouter컴포넌트는 navigation과 브라우저 페이지 이력을 다루기 위해 제공됩니다.

NavLink

 NavLink컴포넌트는 navigation link를 정의
<a>태그 대체 - a태그는 새로 고침을 하므로 새로 고침 없이 다른 뷰를 대체하려고 고안됨
 to 속성 - router설정

Route

Route컴포넌트로 URL을 콘텐츠(페이지)와 연결합니다.

path 속성 - 연결할 router

exact path 속성 - 위의 코드에서 보면 '/'는 다른 컨텐츠에서도 다 겹치기에 그냥 path로 주면 Home은 디폴트로 항상 그려진다. 그렇기에 exact path속성을 주면 전체 경로가 정확히! 부합될 때만 Home 컨텐츠를 보이게 한다.

component 속성 - 연결할 contants(페이지 내용)

 

 

 

 

 

[참고]

learning react 2/e <에이콘출판사>

더 복잡한 SPA구현을 위한 퀵스타터 - https://reacttraining.com/react-router/web/guides/quick-start