클라이언트 사이드 라우팅
브라우저에서 페이지를 전환할 때 전체 페이지를 다시 불러오지 않고, 현재 로딩된 애플리케이션 내에서 필요한 컴포넌트만 교체하는 방식입니다.
핵심 특징
<a>태그의 기본 동작(전체 페이지 새로고침)을 막고,window.history.pushState()로 브라우저 URL만 변경한 뒤 실제 서버 요청은 보내지 않음- 라우터가 현재 URL 변경을 감지해 매핑된 컴포넌트를 찾아 렌더링
- CSR 기반 SPA(Single Page Application)의 핵심 동작 원리
동작 흐름
1. 사용자가 <Link to="/about"> 클릭
2. 라우터가 기본 이동(전체 페이지 로드)을 막음
3. window.history.pushState()로 URL만 변경 (서버 요청 X)
4. 라우터가 변경된 경로에 매핑된 컴포넌트를 찾아 렌더링
(예: <Route path="/about" element={<AboutPage />}>)
5. 필요한 데이터가 있으면 컴포넌트 내부에서 useEffect() 등으로 API 요청
뒤로 가기 / 앞으로 가기 처리
브라우저의 뒤로 가기·앞으로 가기 버튼은 popstate 이벤트를 발생시킵니다. 라우터는 이 이벤트를 구독하고 있다가 바뀐 URL을 다시 분석해 그에 맞는 컴포넌트를 렌더링하므로, 이 경우에도 전체 리프레시 없이 화면 전환만 일어납니다.
예시 (React Router)
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</BrowserRouter>
);
}
핵심 정리
클라이언트 사이드 라우팅은 pushState/popstate로 URL만 갱신하고 필요한 컴포넌트만 교체함으로써, 네트워크 요청을 데이터 호출에 집중시키고 빠른 페이지 전환을 제공합니다.