SPA(Single Page Application)

일반적인 웹사이트의 형태와 다르게, html 파일이 하나만 있는 Web Application.

특정 서비스에 가입하기 위해 form에 입력하다가, 입력 항목이 뭔지 알려주는 버튼을 눌렀을 때 페이지가 이동해버렸다고 가정하자. 항목에 대한 정보를 확인하고 '뒤로가기'를 눌렀는데, 아뿔싸.. 입력해놓은 form이 날아갔다..면 화나지 않겠는가?

SPA는 이러한 사용자 경험의 개선 뿐만 아니라, 불필요한 리로딩 문제 등을 해소할 수 있다는 장점을 가지고 있다. 물론 단점도 존재한다. 최초 로딩 시, 해당 웹서비스에 필요한 대부분의 파일들을 받기 때문에 첫 요청 시에 페이지 로딩이 오래걸릴 수 있다.

Switch in React-Router

(요약) 한놈만 걸려라...

React-Router는 url path가 완벽히 일치해야하는 route 방식과 약간 다르게 동작한다. '/'를 홈이라고 한다면, '/detail'로 요청했을 때 별다른 조치를 하지 않으면 홈도 같이 응답한다. 요청한 url 안에 routing 되어있는 url이 포함되어있으면, 하나만 전달하는 것이 아니라 모두 전달한다.
이를 막기 위해, exact 속성을 사용해도 되지만 각 route 마다 넣어줘야한다는 번거로움이 있다. Switch는 route list중에 요청한 url에 해당되는 하나의 route만 응답하게 해준다.

import {BrowerRouter} from 'react-router'
import {Switch, Route} from 'react-router-dom'

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/' component={Home} exact />  
	<Route path='/detail' component={Detail} />
	<Route render={() => <NotFound />} />
      </Switch>
    </BrowserRouter>
  )
}

Switch 안에서 아래로 순차적으로 요청된 url과 비교한다. 위의 코드대로라면 홈에는 exact를 넣었기 때문에 '/'인 경우만 해당된다.
맨 아래엔 route를 찾지 못할 경우 Not Found를 보여주고 있다. Not Found에는 route가 지정되어있지 않기 때문에, Switch가 없다면 페이지 어딜 가도 Not Found가 나타날 것이다.

withRouter

Route와 연결되지 않은 component에 Routing 되면 넘겨주는 props를 갖게해주는 함수.

Route와 연결된 component에는 props로 history, location, match가 주어진다. history는 뒤로가기나 앞으로가기 등 페이지 이동 관련 함수들이 들어있다. location은 hash, url(query 포함), 정보가 들어있고, match에는 url과 parameter가 들어있다.

기타

• <Route /> 와 component를 이어주는 두 번째 방법으로 render 속성이 있다. 속성값은 함수 형태로 넣어주면 되는데, 함수의 첫번째 인자로 route props(history, location, match)가 들어온다.