리액트 라우터같은 Client Side Routing 에 대해서 설명하세요.

 

라우팅이란?

라우팅은 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스로 라우팅과 렌더링은 애플리케이션의 효율성과 속도에 미치는 영향을 추측하는데 도움이 됩니다.

클라이언트 측 라우팅은 페이지의 JavaScript에 의해서만 처리됩니다. 사용자가 링크를 클릭할 때마다 URL 표시줄이 변경되고 페이지에 다른 뷰가 렌더링됩니다. 이러한 SPA는 전체 페이지를 새로 고치지 않기 때문에 이용자에게 부드러운 UI와 UX를 제공합니다. 

리액트를 이용해서 SPA을 구현할 때 리액트 라우터를 사용하면 어떤 메뉴를 클릭했을 때 페이지를 이동하지 않고 업데이트되는데 이 때 url 역시 바뀝니다. 브라우저의 이전페이지, 다음페이지 버튼 역시 정상적으로 일반적인 웹페이지를 이동하듯이 적용됩니다.

이러한 클라이언트 사이드 라우팅의 원리로는 HTML5 - History API의 pushState라는 메소드를 이용해 임의의 히스토리 기록을 만들어서 이동할 수 있습니다. 이 때 만들어진 히스토리의 페이지는 서버에서 제공하는 페이지가 아니기 때문에, 실제 페이지로 이동하는 것이 아니라 history api가 만들어낸 페이지로 이동하는 것입니다. 그렇기 때문에 http 요청을 보낼 수 있는 url은 아닙니다. 예를 들어 리액트 앱으로 빌드한 페이지를 새 창을 띄워서 들어가보면 get 요청을 보낼 수 없는 url이라고 뜹니다.

클라이언트 사이드 라우팅의 장단점

장점

• 렌더링되는 데이터의 양이 적기 때문에 구성요소 간 라우팅의 속도가 빠릅니다. 나머지 데이터는 DOM에 의해 렌더링되며, 렌더링해야 할 HTML과 CSS가 많아도 DOM은 순식간에 해당 부분을 처리합니다.
• 더 나은 사용자 경험을 위해 애니메이션과 트렌지션은 서로 다른 컴포넌트 간 전환에서 쉽게 구현될 수 있습니다.
• SPA가 작동하는 실제 느낌을 줍니다. 별도의 페이지가 렌더링되지 않으며, 현재 페이지는 새 화면을 보여주기 위해 새로 고침되지 않습니다.

단점

• 초기 로딩 시간이 길 수 있습니다. 모든 라우트와 컴포넌트 그리고 HTML이 한번에 로딩되기 때문에 모든 웹사이트가 첫 요청에 로딩되어야 합니다.
• 불필요한 데이터를 다운받는 시간이 존재할 수 있습니다.
• 외부 라이브러리 사용이 필요합니다. 서버 사이드 라우팅과 다르게 이는 더 많은 코드 작성과 외부 패키지에 대한 의존성을 높힐 수 있습니다.
• SEO 사용이 어려울 수 있습니다.

---

Reference

https://www.pluralsight.com/guides/pros-and-cons-of-client-side-routing-with-react