SPA(Single Page Application) , Client-Side Routing

서론

SPA의 정의 및 기본 개념

SPA(Single Page Application)는 단일 HTML 페이지로 구성된 웹 애플리케이션을 의미합니다. 사용자가 웹 페이지를 탐색할 때, 전체 페이지를 다시 로드하지 않고 현재 페이지 내에서 필요한 콘텐츠만 동적으로 로드하여 빠르고 원활한 사용자 경험을 제공합니다. 이는 주로 JavaScript 프레임워크와 라이브러리를 활용하여 구현됩니다.

 

SPA의 동작 원리

기존의 다중 페이지 애플리케이션(MPA)에서는 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 HTML 페이지를 받아오고 전체 페이지를 새로 고칩니다. 반면에 SPA에서는 처음에 한 번만 전체 페이지를 로드하고, 이후의 페이지 전환은 서버와 비동기적 통신(AJAX)을 통해 필요한 데이터만 받아와 화면을 동적으로 갱신합니다. 이를 통해 페이지 이동 시 발생하는 로딩 시간을 최소화하고, 부드러운 UX를 사용자에게 제공합니다.

이미지 출처 - https://www.scalablepath.com/front-end/single-page-applications

 

---

본론

사실 실제로 서비스화 될 규모의 웹 사이트에 페이지가 하나만 존재한다는 것은 불가능합니다. 이러한 이유로 SPA에서는 여러 페이지를 사용자에게 제공하기위해 Client-Side Routing(CSR)을 사용합니다. 라우팅이란 사용자가 특정 URL을 방문할 때 해당 URL에 맞는 페이지나 콘텐츠를 제공하는 방식입니다.

 

 

Server-Side Routing VS Client-Side Routing

기존의 MPA에서는 각 페이지가 별도의 HTML 파일로 구성되어 있으며, 사용자가 URL을 변경할때 서버에게 해당 URL의 HTML 을 요청하고 받은 HTML로 페이지를 그립니다. 즉, 서버에게 "페이지" 자체를 받는다고 봐도 무방하죠. 이게 Server-Side Routing 입니다.

 

이미지 출처 - https://www.telerik.com/blogs/what-is-react-router-what-is-react-location

 

 

반면, SPA에서 사용하는 Client-Side Routing은 URL에 맞는 콘텐츠를 서버에 요청하지 않고, 클라이언트 측에서 동적으로 제어하여 URL에 맞는 페이지를 로딩합니다. 이를 가능하도록 하는 대표적인 라이브러리로는 React Router와 Vue Router가 있습니다.

 

이미지 출처 - https://www.telerik.com/blogs/what-is-react-router-what-is-react-location

 

 

React Router를 프로젝트에서 사용해보신 분이라면, 최상위 컴포넌트에서 보여줄 페이지들을 Route 요소로 정의하고, 이를 BrowserRouter 태그로 감싸야 한다는 사실을 알고 계실 겁니다.

const App = () => {
	return (
		<div className='App'>
			<BrowserRouter>
				<Routes>
					<Route path="/" element={<Main />}></Route>
					<Route path="/product1/" element={<Product1 />}></Route>
					<Route path="/product2/" element={<Product2 />}></Route>
					<Route path="/product3/" element={<Product3 />}></Route>
				</Routes>
			</BrowserRouter>
		</div>
	);
};

 

즉, 최상위 App 컴포넌트 하나만 존재하고, 이 App 컴포넌트 안에 여러 하위 페이지를 포함하며, React Router(또는 다른 브라우저 라우터 라이브러리)를 사용하여 각 하위 페이지에 URL이라는 이름을 부여합니다.

 

사용자가 특정 URL을 요청하면, React Router는 해당 URL과 일치하는 하위 페이지 컴포넌트를 화면에 보여주고, 일치하지 않는 컴포넌트는 감춥니다. 이로 인해 페이지 전체를 다시 로드하지 않고도 URL에 따라 다른 콘텐츠를 표시하며 사용자들은 SPA가 여러 페이지처럼 보일 수 있게 됩니다.

 

---

결론

SPA는 이러한 클라이언트 사이드 라우팅을 통해 페이지 전환 시 발생하는 불필요한 로딩을 없애고, 더 직관적이고 효율적인 웹 애플리케이션을 구현할 수 있습니다.

 

React Router와 같은 라이브러리를 통해 URL 관리와 페이지 전환을 간편하게 처리할 수 있습니다. 결국, SPA는 MPA처럼 보이지만, 실제로는 더 나은 성능과 사용자 경험을 제공하는 현대적인 웹 애플리케이션 개발 방식입니다.

 

 

여기까지 제가 SPA에 대해 처음 공부했을 때 오해했던 부분에서 비롯된 인사이트를 위주로 설명해봤습니다. 다음 포스팅에서는 React DOM과 같은 SPA의 최적화 부분에 초점을 맞춰 SPA 관련 포스트를 한번 더 업로드 하도록 하겠습니다.