본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

SPA와 라우팅

Single Page Application

• SPA는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식
• 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다.

Multi Page Application

• MPA는 서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달
• 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송된다.
• 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리한다.
• 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘들다.

SPA의 특징

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

SPA의 기술적 장점

• 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱이 가능
• 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다.
• 데이터요청을 캐싱하여 재사용하는 등 제약조건이 줄어든다.
• 고도의 소프트웨어 설계와 패턴 적용 가능
  • 소프트웨어 설계란 상태관리, 라우팅, 컴포넌트 재사용, 훅을 통한 로직 재사용 등이 있다.

SPA의 기술적 난관들

• MPA보다 SEO에 불리하다.
• 하나의 자바스크립트 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용등이 중요하다.
• 코드가 많아질수록 로드 속도가 느려진다.
  • -code-splitting, -free-shaking, -lazy-loading으로 문제를 보완할 수 있다.

SPA에서의 라우팅

• 주로 Hisotry API 혹은 URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현
• history, location 등 HTML5 API를 활용
• Window event를 활용하여 페이지 전환 등의 이벤트 시 핸들러를 등록
• react-router, reach-router등의 라이브러리를 활용하면, 라우팅 관련 기능을 쉽게 활용

react-router 소개

react-router

• Declarative routing for React
• React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현
• 웹에서는 react-router-dom을 사용
• 적용 시 서버의 모든 path에서 같은 앱을 서빙하도록 해야한다.

react-router의 기능

• 해당하는 path로 진입 시 컴포넌트를 렌더링
• query, path variable 등 URL Parameter를 얻어 활용
  • /login?email=~
• 조건에 맞지 않을 경우 redirect 한다.
  • <Redirect to="/register" />
• 페이지 이동 시, 이벤트 핸들러를 등록
• /posts/my-post-1 등의 nested route를 구현

react-router의 사용

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

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

export function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="~">
          <AboutPage /> # 컴포넌트
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

react-router 컴포넌트

BrowserRouter

• HTML5의 History API를 사용하여, UI와 URL의 싱크를 맞추는 역할
• 모든 URL에 대해 동작하게 하기 위해서는 서버 설정 필요
• 모든 path 앞의 basename을 지정할 수 있다.
  • basename='/ko/
• forceRefresh로 페이지 이동 시 리프레시할 것인지 지정할 수 있다.

Switch

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

Route

• path와 컴포넌트를 매칭
• 매칭된 컴포넌트는 children으로 넣어주거나 component prop로 넘긴다.
• exact 키워드로 정확하게 매칭되는 path를 설정
• Route로 렌더링되는 최상위 컴포넌트는 match, location, history를 prop로 받는다.
• render prop로 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제한다.

Redirect

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

Link, NavLink

• to prop를 특정 URL로 받아, 클릭 시 네비게이션 한다.
• anchor tag를 래핑한다.
• NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가기능이 있다.
• to에 location object나 함수를 받을 수 있다.

useHistory, useLocation, useParams, useRouteMatch

• 최상위 컴포넌트가 아니더라도, hook으로 react-router 관련 객체에 접근할 수 있다.

react-router로 페이지 구성하기

공통 페이지 레이아웃

export default function PageLayout({header, children}) {
  return (
    <Layout>
      <Navigation />
    </Layout>
  )
}

공통 페이지 네비게이션

function Navigation() {
  return (
    <Nav>
      <NavLink to="/">Home</NavLink>
    </Nav>
  )
}

라우터 연결

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <HomePage />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}  

react-router 응용

Private Route 만들기

• 특정조건이 충족되지 않았을 때 다른 페이지로 Redirect 하도록 하는 기능
• 유저의 상세 페이지, 개인정보 변경 페이지 등을 만들 때 사용된다.

query string 활용하기

• URL의 query string 정보를 활용해 앱을 구성할 수 있다.
• URLSearchParams API를 활용한다.