개요
Server Side Routing VS Client Side Routing
리액트 라우터는 Client Side Routing 을 사용한다.
Server Side Routing (전통적인 방식)
브라우저는 웹 서버에 문서를 요청하고, CSS와 JS를 다운로드하여 평가한 후에 서버에서 보내준 HTML을 렌더링한다.
사용자가 링크를 클릭하면 새로운 페이지를 위해 처음부터 위 과정을 다시 반복한다.
Client Side Routing
CSR(Client Side Routing)을 사용하면 앱이 링크를 클릭하는 것으로 URL을 업데이트 할 수 있다.
전통적인 방식과는 다르게 서버에 요청을 보내지 않고 URL과 UI를 업데이트 하는 것이다.
위 행위로 앱은 즉시 새로운 UI를 렌더링하고, fetch로 데이터 요청을 해 페이지를 새로운 UI로 업데이트할 수 있다.
Client Side Routing의 이점
전통적인 방식과 다르게 브라우저는 새로운 문서를 요청하거나 다음 페이지의 CSS나 JS를 다시 불러들일 필요가 없기 때문에 끊김없는 UI로 사용자 경험(UX)을 개선시킨다.
React와 함께 React Router를 사용하면 얻는 이점
Single Page Application (SPA) Navigation
전체 페이지를 다시 로드할 필요 없이 탐색 기능이 있는 단일 페이지 어플리케이션(SPA)을 만들 수 있다.
사용자 입장에서는 단일 페이지이지만 서로 다른 페이지를 이동하고 있다는 인식으로 URL을 관리해
끊김없는 사용자 경험을 줄 수 있다.
Declarative Routing (선언적 라우팅)
리액트 라우터는 라우팅에 대해 선언적인 접근 방식을 제공한다.
즉, 개발자는 경로를 구성 요소 트리의 일부로 정의한다.
이로 인해 긍정적인 개발자 경험(DX)을 줄 수 있으며, 라우팅을 더 쉽게 유지보수할 수 있다.
Dynamic Routing (동적 라우팅)
앱의 상태나 데이터를 기반으로 경로를 동적으로 생성할 수 있다.
이는 사용자 생성 콘텐츠가 있는 앱(블로그, 커뮤니티 등등..)이나 사용자 프로필, 제품 페이지와 같이
동적 경로가 필요한 앱에 유용하게 사용된다.
Nested Routing (중첩 라우팅)
리액트 라우터는 중첩된 경로를 지원해, 더 복잡한 UI 구조를 만들 수 있다.
경로 내에 경로를 정의할 수 있어 경로를 기반으로 페이지의 여러 부분에서 렌더링되는
다양한 구성 요소(모든 페이지에 공통적으로 사용되는 레이아웃이나 비즈니스 로직)가 있는
레이아웃을 더 쉽게 만들 수 있다.
URL Parameters and Query Strings (URL 매개변수 및 쿼리 문자열)
URL 매개변수 및 쿼리 문자열 작업이 간단해지는 이점이 있다.
검색 쿼리로 사용자 ID 혹은 동적인 데이터와 같은 정보를 URL을 통해 전달해야 하는 앱에 필수적이다.
(동적 라우팅과 비슷한/연계되는 이점?)
Route Protection and Redirection (경로 보호 및 리디렉션)
경로 보호(Ex. 인증 상태에 따라 특정 경로에 대한 액세스 제한 -> 미로그인시 마이 페이지 못들어가게) 및 리디렉션(Ex. 사용자를 한 경로에서 다른 경로로 리디렉션)을 구현할 수 있다.
이는 앱 내에서 사용자 액세스 및 탐색 Flow를 관리하는데 중요한 역할을 한다.
