Hard Navigation vs SPA Navigation
SPA (Single Page Application) Routing/Navigation이란?
SPA(Single Page Application)는 단일 HTML 페이지에서 모든 콘텐츠를 동적으로 로드하고 표시하는 웹 애플리케이션입니다. 이 방식에서 Routing(라우팅)이란 URL 경로에 따라 애플리케이션 내의 콘텐츠를 변경하는 방식을 말합니다.
1. Hard Navigation (하드 내비게이션)
하드 내비게이션은 전통적인 방식으로, 네트워크 요청을 통해 서버에서 새로운 페이지를 받아오는 방식입니다. 이 방식은 **SSR(Server Side Rendering)**이나 **SSG(Static Site Generation)**에서 사용됩니다.
• 네트워크 요청: 사용자가 다른 페이지로 이동할 때마다 서버에 요청을 보내고, 새로운 HTML 문서를 받아와서 전체 페이지를 다시 로드합니다.
• 페이지 새로고침: 새로운 URL을 방문할 때마다 전체 페이지가 새로고침되므로, 이전 페이지의 상태가 사라지고 새로운 페이지가 로드됩니다.
하드 내비게이션의 동작 예시:
• 사용자가 example.com/about에서 example.com/contact로 이동하면, 서버에 요청이 가서 새로운 HTML 파일이 로드됩니다.
• 이 방식은 네트워크를 통해 모든 페이지를 완전히 다시 로드하는 것을 의미합니다.
SSR, SSG와의 관계:
• SSR(Server Side Rendering): 서버에서 매번 요청을 처리하고, 완전한 HTML을 반환하여 클라이언트에서 렌더링합니다.
• SSG(Static Site Generation): 빌드 시점에 정적 페이지를 생성해 배포하며, 페이지 전환 시 새로운 HTML 파일을 서버에서 받아옵니다.
2. SPA Navigation (CSR - Client-Side Rendering)
SPA Navigation은 클라이언트 측에서 모든 라우팅과 페이지 전환을 처리하는 방식입니다. 사용자가 페이지 간 이동을 할 때, 네트워크 요청 없이 이미 로드된 자바스크립트 코드가 URL을 변경하고 화면을 업데이트합니다.
• 네트워크 사용 안함: 네트워크 요청 없이, 자바스크립트가 페이지 전환을 처리합니다. 페이지 간 전환이 이루어질 때 새로운 HTML 페이지를 받지 않고, 동적으로 콘텐츠를 바꿔줍니다.
• 빠른 페이지 전환: 네트워크 요청 없이 자바스크립트에서 모든 것이 처리되므로, 사용자가 페이지를 이동할 때 빠르게 전환됩니다.
SPA 내비게이션의 동작 예시:
• 사용자가 example.com/home에서 example.com/about로 이동할 때, React와 같은 라이브러리가 이를 감지하고, 페이지 전체를 다시 로드하지 않고 해당 경로에 맞는 컴포넌트만 렌더링합니다.
CSR(SPA)와의 관계:
• CSR(Client-Side Rendering): 모든 페이지를 클라이언트 측에서 렌더링하고, 페이지 전환을 자바스크립트로 처리합니다. URL이 변경되더라도 전체 페이지가 새로고침되지 않고, 일부 콘텐츠만 변경됩니다.
React Router Dom의 역할
**React Router Dom**은 React 애플리케이션에서 SPA 방식의 라우팅을 구현하기 위해 사용되는 라이브러리입니다. 이 라이브러리는 클라이언트 측에서 URL 경로에 맞게 컴포넌트를 동적으로 렌더링하고, 하드 내비게이션 없이 페이지 간 전환을 처리합니다.
React Router의 주요 역할:
1. 클라이언트 측 라우팅: SPA 애플리케이션에서 사용자가 URL을 변경할 때마다 네트워크 요청 없이 필요한 컴포넌트를 렌더링하여 페이지 전환을 처리합니다.
2. useNavigate(): React Router Dom에서 제공하는 네비게이션 훅으로, 자바스크립트를 사용하여 URL을 프로그래밍적으로 변경하고, 해당 경로에 맞는 컴포넌트를 렌더링하는 데 사용됩니다.
• 예를 들어, useNavigate()를 사용해 사용자가 특정 버튼을 눌렀을 때 다른 경로로 이동할 수 있습니다.
const navigate = useNavigate();
function goToAboutPage() {
navigate('/about');
}
3. 히스토리 관리: window.history 객체를 직접 사용하지 않고, React Router Dom은 **useNavigate**와 같은 API를 통해 히스토리 스택을 관리합니다. 사용자가 브라우저 뒤로 가기, 앞으로 가기 등의 동작을 할 때도 새로고침 없이 처리할 수 있습니다.
Hard Navigation vs SPA Navigation 정리
• Hard Navigation:
• 페이지 전체를 새로고침하여 서버에서 새로운 HTML을 받습니다.
• SSR, SSG 방식에서 주로 사용됩니다.
• 네트워크 요청이 발생하고, 전환 속도가 상대적으로 느립니다.
• SPA Navigation:
• 자바스크립트로 URL을 변경하고, 네트워크 요청 없이 컴포넌트만 동적으로 렌더링합니다.
• React Router Dom은 SPA 애플리케이션에서 클라이언트 측 라우팅을 담당하며, 페이지 전체를 새로고침하지 않고 동적으로 콘텐츠를 변경합니다.
• 전환 속도가 빠르고, 더 나은 사용자 경험을 제공합니다.
요약
• SPA Navigation은 React와 같은 라이브러리에서 클라이언트 측 라우팅을 구현하는 방식으로, 네트워크 요청 없이 빠르게 페이지 전환을 처리합니다.
• **React Router Dom**은 이러한 SPA 방식의 라우팅을 제공하여, 사용자 경험을 향상시키는 중요한 도구입니다.
• Hard Navigation은 전통적인 방식으로, 서버로부터 새로운 페이지를 받는 방식이며, 페이지를 새로고침합니다.