SPA 웹 구성을 위한 React-router-dom

우선 SPA가 무엇인지 간략하게 알아보고 진행하려고한다.

SPA(Single Page Application)란?

SPA(Single Page Application) 는 말그대로 페이지가 하나인 애플리케이션을 뜻한다.  SPA개념등장 이전까지만 해도 웹애플리케이션은 여러 페이지로 구성되었으며, 요청할 때 마다 새로고침이 발생하고 서버로부터 리소스를 받아 렌더링 하는 방식이었다. 

 

서버가 해당하는 html을 주는 방식을 SSR(Server Side Rendering) 이라고한다. 그러나 웹에서 제공하는 정보가 많아지게 되면서 용량이 커져갔고, 모바일의 등장으로 이런 전통적인 방식은 성능상 한계를 맞이하게 되었다.

 

 그래서 이러한 문제를 해결하기 위해 CSR(Client Side Rendering)이라는 방식이 도입되었으며 사용자의 행동에 따라 필요한 데이터만 서버로부터 JSON으로 전달받고, 클라이언트는 그저 HTML을 그리는 동적으로 렌더링하는 방법이다. 웹 페이지에서 유저가 동작을 수행할때 전체 새로고침대신 필요한 부분만 렌더링하기 때문에 트래픽을 감소시킨다.

 

 

이제 React-router-dom에 대해 알아보자

기존에 웹 앱은 <a>라는 태그를 사용하여 새로운 페이지를 불러올 때마다 리로드(새로고침) 되는 정적인 페이지를 구성했다면, React는 동적으로 SPA페이지를 구성 가능하게 해주었다. 하지만 더욱더 편리하게 동적인 웹 앱을 개발하기 위한 좋은 패키지가 React-router-dom이다. 

 

React-router-dom이라는 패키지를 사용하기 위해선 기본적으로 React 웹앱이 필요하다. 

 

 

<BrowserRouter> 

HTML5 히스토리 API를 사용하여 주소를 관리하는 라우터이며, 페이지를 새로고침 없이 주소 변경이 가능하다. 동적인 페이지를 구성할때 쓰이며, 배포했을 때 새로고침하게되면 경로를 찾지 못해 에러를 발생한다(404에러, 서버에서 추가적인 셋팅 필요)

<BroswerRouter>
 <Switch>
  <Route path="/" exact component={Home} />
  <Route path="/a" component={a} />
  <Route path="/b" component={b} />
 </Switch>
<BroswerRouter>

<HashRouter>

URL의 hash를 활용한 라우터이며 주로 정적인 웹에 사용하지만 검색엔진에 뜨지않아 실무에선 사용하지 않는다. 하지만 새로고침해도 에러가 나지않는다.

<HashRouter>
 <Switch>
  <Route path="/" exact component={Home} />
  <Route path="/a" component={a} />
  <Route path="/b" component={b} />
 </Switch>
</HashRouter>

<Switch>

Switch는 모든 경로(Path)중 일치하는 경로만 렌더링한다. 즉, /about 이라는 경로를 Switch에서 <Route path="/about">와 일치하는지 검색하고, 일치한다면 검색을 중단한 다음 렌더링한다.

 

<BroswerRouter>
 <Switch>
  <Route path="/" exact component={Home} />
  <Route path="/a" component={a} />
  <Route path="/b" component={b} />
  <Redirect path="*" to="/" /> 
 </Switch>
<BroswerRouter>

<Route>

Route는 <Link>컴포넌트에 to에 지정된 path에 컴포넌트를 이어준다.

 

<BroswerRouter>
 <Switch>
  <Route path="/" exact component={Home} />
  <Route path="/a" component={a} />
  <Route path="/b" component={b} />
  <Redirect path="*" to="/" /> 
 </Switch>
<BroswerRouter>

<Link>

Link는 to에 설정된 주소로 이동 시키는 컴포넌트다.

<BroswerRouter>
 <Switch>
  <Route path="/" exact component={Home} />
  <Route path="/a" component={a} />
  <Route path="/b" component={b} />
  <Redirect path="*" to="/" /> 
 </Switch>
<BroswerRouter>

 

<NavLink> 

Link의 확장버전으로 기능은 비슷하지만 to에 지정된 path와 현재 경로가 일치하는 경우 스타일 또는 클래스를 적용할 수 있다.

 

<BroswerRouter>
 <Switch>
  <Route path="/" exact component={Home} />
  <Route path="/a" component={a} />
  <Route path="/b" component={b} />
  <Redirect path="*" to="/" /> 
 </Switch>
<BroswerRouter>

출처

SSR-CSR