📌 먼저, SPA와 MPA

SPA ? Single Page Application

SPA란 말 그대로, 페이지가 하나인 어플리케이션이다.
하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
전통적인 구조는 MPA(Multi Page Application)

MPA(Multi Page Application) ???
서버에 미리 여러 페이지를 두고, 유저가 네비게이션 시 요청에 적합한 페이지를 전달
미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨
서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리
페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘들다 !
요즘 웹에서 제공되는 정보가 너무 많기 때문에 MPA는 속도적인 측면에서 문제가 있다.

SPA의 특징

• Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅한다.
  • e.preventDefault() 실행 - 리로드 없음
• AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다.
• MPA와 다르게 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현
• 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 된다.

기술적 장점

• 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱이 가능
  • 서버 성능도 크게 무리 안간다는 장점
  • CDN : 콘텐츠 전송 네트워크(Content delivery network)
  • MPA는 CDN 캐싱이 불가능 - 서버에서 빌드를 하기 때문에
• 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다. 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다.
• 웹사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와 패턴을 적용할 수 있다.
  • 고도의 소프트웨어 설계 : 상태관리, 라우팅, 컴포넌트 재사용, Hook을 통한 로직 재사용 등

SPA의 기술적 난관들

• MPA 방식 보다는 Search Engine Optimization(SEO, 검색 엔진 최적화)에 불리함
• 하나의 자바스크립트 앱이 지속하므로 메모리 관리와 성능, 데이터 활용 등이 중요
  • 페이지가 리로드 안되므로 한번 페이지가 뜬 상태로 유지가 됨
• 여러 페이지를 전송받는 것보다 하나의 거대한 자바스크립트 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려짐

SPA에서의 라우팅

• 주로 History API 혹은 URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현
  • 요즘은 History API를 많이 이용
• history, location 등 HTML5 API를 활용
• visibilitychange, popstate, beforeunload 등 window event를 활용하여 페이지 전환 등의 이벤트 시 핸들러를 등록
  • 페이지 전환 시 어떠한 처리를 할 수 있도록
• react-router, reach-router 등의 라이브러리를 활용하면, 라우팅 관련 기능을 쉽게 사용할 수 있음
  • 직접 구현 안하고 사용할 수 있음

여기까지, SPA, MPA에 대한 이론적인 내용이다.

---

📌 그래서, 리액트 라우터

여러 개의 페이지로 이루어진 어플리케이션이 있다고 해보자.

상단에 여러 버튼을 누르면 각각 다른 페이지가 나타나고 또 그 안에 다른 페이지가 들어있고 또 ... 페이지가 계속 있을 수 있다.

페이지가 전환될 때마다 주소창의 내용이 달라지며, 각 주소를 방문할 때마다 그에 해당하는 페이지가 열린다.

이를 구현하려면, 어떤 주소로 들어왔을 때 그 주소를 알아내서 그에 해당하는 컴포넌트를 렌더링하고 그 상태를 관리하기 위해 내부적으로 state나 props 같은 값을 복잡하게 사용해야 한다.

이러한 작업은 굉장히 복잡하고 귀찮다. 🤯😩🤯
이때 이러한 작업을 정말 쉽게 만들어 주는 도구가 바로 React-router-dom 이다 !

React-router

• Declarative routing for React 라는 모토
  • Declarative(선언적) : Imperative(명령적)의 반대말
  • Declarative : <Link to = "/login" />
  • Imperative : handle(link = () ⇒ push('/login'))
• React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현
  • JSX : <Link to = "/login" />
  • History API : handle(link = () ⇒ push('/login'))
• 웹에서는 react-router-dom을 사용
• 적용 시, 서버의 모든 path에서 같은 앱을 서빙하도록 해야 함.
  • 서버에서 다른 path일 때 다른 앱을 서빙하면 ? MPA

React-router의 기능

• React 컴포넌트를 특정 path와 연결하면, 해당 path로 진입 시 해당하는 컴포넌트를 렌더링하게 함
• query, path variable 등 URL parameter를 얻어 활용함
• 조건에 맞지 않을 경우, Redirect
• 페이지 이동 시, 이벤트 핸들러 등록

⭐ React-router의 사용

BrowserRouter, Switch, Router, Link 태그 한 줄 내용

• <BrowserRouter>로 감싸 Router Context를 제공
• Switch로 매칭되는 라우트 하나를 (하나만) 렌더링하게 한다.
• Route로 path를 정의하고, 그 안에 렌더링하고자 하는 컴포넌트를 넣는다.
• Link 태그로 특정 페이지 이동 시, 리로드 없이 페이지가 이동한다.

BrowserRouter

• HTML5의 History API를 사용하여, UI와 URL의 싱크를 맞추는 역할
  • login 버튼을 누르면 test.com/login 이렇게 URL 변경
• 모든 URL에 대해 동작하게 하기 위해서는 서버 설정 필요
• 모든 path 앞의 basename을 지정할 수 있음 ex) basename="/ko"
• forceRefresh로 페이지 이동 시 리프레시할 것인지 지정할 수 있음

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
  >
  <App />
</BrowserRouter>

Switch

• 여러 Route 중 매치되는 Route, 위에서부터 하나 선택하여 렌더링함
• 매칭되는 Route가 없으면 아무것도 보여주지 않음
  • fallback용으로 404 Not Found Page 추가함
• path = "/"의 경우, 모든 path에 매칭되므로 exact 키워드를 추가하거나 가장 아래로 내림

<Switch>
  <Route exact path ="/">
    <HomePage />
  </Route>
  <Route exact path ="/login">
    <LoginPage />
  </Route>
  <Route exact path ="/detail">
    <UserDetailPage />
  </Route>
</Switch>

Route

• path와 컴포넌트를 매칭
• 매칭되는 컴포넌트는 ① children으로 넣어주거나 ② component prop으로 넘김
• exact 키워드로 정확하게 매칭되는 path를 설정함.
• Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받음
• render prop으로, 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제함
  • <Route render = {( ) ⇒ { }}>

<Route path="/"> <Component /> </Route>

Redirect

• Link와 비슷하나, 렌더링되면 to prop으로 지정한 path로 이동함
• Switch 안에서 쓰일 경우 from, to를 받아 이동하게 한다
  • ex) from = "/" to = "/login"

Link, NavLink

• to prop을 특정 URL로 받아, 클릭 시 네비게이션함
• anchor tag(a태그)를 래핑

<Link to="/user">
	To User
</Link>

위 코드의 결과 : <a>To User</a>

• NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있음
  • Navigation에서 주로 쓰이는 태그
  • <NavLink to "/users"> ... </...>
• to에 location object나 함수를 받을 수 있음
  • hash, pathname, state 등
  • <Link to = {...}> 가능

<Link to="/">home</Link>
<Link to="/login">Login</Link>

📌 적용 화면

• => 주소창을 보면 리로드없이 주소가 바뀌는 것을 볼 수 있다!

---

References

벨로퍼트의 리액트
생활코딩! React 리액트 프로그래밍 - 위키북스