안녕하세요 :)
오늘은 웹 애플리케이션에서 빼놓을 수 없는 라우팅(Routing)에 대해 알아보겠습니다. 라우팅은 사용자가 특정 URL에 접근했을 때, 그 URL에 맞는 화면(페이지 or 컴포넌트)을 보여주는 과정을 말합니다. 특히, React와 같은 SPA(Single Page Application)에서는 라우팅이 조금 다르게 동작합니다.

이번 글에서는 전통적인 라우팅과 SPA 라우팅의 차이를 이해하고, 두 방식이 어떻게 다른지에 대해 알아보도록 하겠습니다.
라우팅이란?
라우팅(Routing)은 '사용자가 웹 애플리케이션에서 특정 URL 경로에 접근했을 때, 해당 경로와 연결된 페이지나 컴포넌트를 보여주는 과정'입니다. 라우팅은 여러 페이지를 이동할 수 있도록 해주며, React 같은 SPA(Single Page Application)에서는 라우팅이 특별한 의미를 가집니다.

- 전통적인 웹의 라우팅: 서버가 각 URL 요청에 대해 새로운 HTML 페이지를 반환합니다.
- SPA의 라우팅: 페이지가 새로고침 없이 URL만 변경되고, JavaScript가 화면을 업데이트합니다.
이게 무슨 차이일까요?
라우팅 방식의 차이
먼저 전통적인 웹의 라우팅 방식부터 차례대로 살펴보겠습니다.

"전통적인 웹의 라우팅 방식에 대해"
전통적인 라우팅의 동작 방식은 다음과 같습니다.
- 사용자가 새로운 URL에 접근하면, 브라우저가 서버에 요청을 보냅니다.
- 서버는 해당 요청을 처리하여 새로운 HTML 페이지를 생성하고, 브라우저에 반환합니다.
- 이후 페이지가 새로고침되어 화면이 완전히 다시 그려집니다.
위와 같은 전통적 라우팅 동작의 특징은 페이지 새로고침이 필요하다는 것과 서버 중심의 동작이라는 것입니다.
- 새 페이지를 요청할 때마다 브라우저가 서버로 HTML을 보내달라고 요청해야 하고,
- 모든 페이지의 데이터를 서버에서 직접 생성하여 보내줘야 합니다.
예시를 볼까요?
- 사용자가 /about 페이지로 이동하면,
- 브라우저 -> 서버로 요청 : "안녕! 내가 지금 /about 페이지가 필요한데 좀 줄래?!"
- 서버 -> 브라우저 응답 : "/about 페이지? 알겠어~ 보내주게~ HTML로 생성해서 보내줄게~"
- 이렇게 브라우저는 반환받은 HTML로 화면을 새로 그리게 됩니다.
"SPA(Single Page Application)"
SPA의 동작 방식은 다음과 같습니다.
- SPA에서는 페이지 전환이 발생하더라도, 새로운 HTML을 요청하지 않습니다.
- 대신 JavaScript가 현재 페이지를 동적으로 업데이트하며 화면을 전환합니다.
- 서버에서 처음 한 번만 애플리케이션 전체의 HTML과 JavaScript를 가져오고, 이후부터는 브라우저 내에서만 동작합니다.
SPA의 특징은 페이지 새로고침이 필요없고, 클라이언트 중심 동작 방식이라는 것인데요,
- URL이 변경되어도 JavaScript가 필요한 데이터를 가져와 화면을 업데이트합니다.
- 또한, 필요한 데이터만 서버에서 가져오고, 브라우저에서 렌더링을 처리합니다.
SPA도 예시로 볼까요?
- 사용자가 /about 페이지로 이동하면,
- 브라우저는 서버에 전체 HTML을 요청하지 않고,
- 현재 JavaScript가 서버에서 필요한 데이터만 따로 가져오고, 기존 화면을 업데이트 합니다.
- 화면은 이렇게 업데이트가 되지만 새로고침은 발생하지 않습니다.
두 종류의 라우팅 방식을 비유해서 설명해보자면, "음식점"에 비유할 수 있을 거 같습니다.
- 전통적인 라우팅 방식은 매번 새로운 음식을 주문하는 방식인 것이고,
- SPA 라우팅 방식은 한 번에 전체 음식을 주문해놓고 먹으면서 중간에 더 먹고싶은 사이드 메뉴같은 것만 추가로 주문하는 방식인 것이죠.
실제 사례로 살펴보기
실제 사례로 두 라우팅 방식을 더 알아볼까요? 대표적으로 네이버 블로그와 카카오톡 웹을 비교해볼 수 있을 거 같습니다.

"전통적인 라우팅 방식의 사례 : 네이버 블로그"
- 동작 방식
- 네이버 블로그는 전통적인 라우팅 방식을 사용하고 있습니다.
- 사용자가 특정 블로그 글이 담긴 /post/123과 게시글을 클릭하면, 서버에서 새로운 HTML 페이지를 요청합니다.
- 서버는 요청받은 경로에 해당하는 HTML 파일을 생성하고, 이를 브라우저로 반환하게 됩니다.
- 이 과정에서 페이지는 완전히 새로고침되며, 이전 페이지의 상태는 유지되지 않습니다.
- 구체적인 흐름으로 볼까요?
- 사용자가 네이버 블로그 목록 페이지(예시: /blog)에서 특정 글의 제목을 클릭합니다.
- 브라우저는 /post/123 경로에 해당하는 HTML 페이지를 서버에 요청합니다. (요청 예시: GET /post/123)
- 네이버 블로그 서버는 요청받은 경로에 맞는 HTML을 생성하고 반환합니다.
- 여기서 서버는 글 제목, 내용, 작성자, 댓글 등의 데이터를 포함한 HTML 파일을 브라우저로 보내게 됩니다.
- 브라우저는 서버에서 받은 HTML을 새로 렌더링하고, 렌더링 과정에서 기존 페이지는 사라지고, 새로운 페이지가 그려집니다.
- 위와 같은 흐름으로 보았을 때, 사용자 입장에서 한 번 생각해볼까요?
- 아마 글을 클릭하면 페이지가 잠시 멈춘 것처럼 보일 것이고 새로고침이 일어날 것입니다.
- 발생한 새로고침 때문에 기존 페이지의 스크롤 위치나 상태가 초기화 될 것입니다.

"SPA 라우팅 방식의 사례 : React 기반 카카오톡 웹 애플리케이션"
- 동작방식
- 카카오톡 웹 애플리케이션은 SPA 라우팅 방식을 사용합니다.
- 사용자가 대화방 목록에서 특정 방을 클릭해도 브라우저는 서버에 새로운 HTML 페이지를 요청하지 않습니다.
- 대신, 이미 로드된 JavaScript 코드가 새로운 방에 맞는 데이터를 서버에서 가져와 브라우저에 업데이트합니다.
- 페이지는 새로고침 없이 동적으로 변경되겠죠.
- 구체적인 흐름으로 볼까요?
- 사용자가 대화방 목록(예: /chats)에서 특정 대화방(예시: /chats/123)을 클릭합니다.
- 브라우저는 /chats/123 경로에 맞는 새로운 HTML을 요청하지 않고,
- 대신 JavaScript가 서버에 필요한 데이터만 요청합니다. HTTP 요청을 보내게 되는데, GET /api/chats/123 (Json 데이터 요청)와 같은 형태의 요청을 보내게 됩니다.
- 서버는 해당 대화방에 필요한 데이터(예시: 대화 내용, 참여자 정보)를 JSON 형식으로 반환합니다. 전체 HTML이 아니라, 필요한 데이터만 딱 전송을 한 것이죠.
- 브라우저는 기존 HTML을 유지하며, JavaScript를 통해 대화 내용을 화면에 업데이트합니다.
- URL은 /chats/123으로 바뀌지만, 페이지는 새로고침되지 않습니다.
- 위와 같은 흐름으로 보았을 때, 사용자 입장에서 한 번 생각해볼까요?
- 대화방을 클릭해도 화면이 새로고침되지 않으며, 매우 빠르게 새로운 내용이 표시됩니다.
- 이전 상태(예시: 채팅 목록의 스크롤 위치)가 그대로 유지됩니다.
간단하게 마지막 정리를 표로 보도록 하겠습니다.
특징 | 전통 라우팅 : 네이버 블로그 | SPA 라우팅 : 카카오톡 웹 애플리케이션 |
페이지 새로고침 | 매번 새로고침 발생 | 새고고침 없이 화면 업데이트 |
속도 | 서버에서 HTML 전체를 받아오기에 느림 | 필요한 데이터만 요청하므로 빠름 |
사용자 상태 유지 | 이전 페이지의 스크롤 위치나 입력값 등은 초기화됨 | 상태가 유지됨. (스크롤 위치, 입력값 등) |
데이터 요청량 | HTML + 데이터 전체 요청 | 데이터(JSON)만 요청 |
지금까지 두 방식에 차이를 알아보았으니 이제 두 방식의 장단점에 대해 알아볼까요?
두 라우팅 방식의 장단점
- 전통적인 라우팅의 장단점
- 검색 엔진 최적화의 유리(SEO 유리)
- 초기 로딩 속도가 굉장히 빠름(필요한 HTML만 로드하기 때문)
- 구현이 단순하고 안정적임.
- 하지만, 페이지 새로고침이 많이 발생하여 사용자 경험이 떨어질 수 있음.
- 매번 HTML 을 서버에 요청해야 하기 때문에 요청량이 많아 트래픽이 증가함.
- SPA 라우팅의 장단점
- 빠른 화면 전환과 부드러운 UX 제공
- 서버 요청량이 적어 효율적임.
- 사용자 경험의 기존 상태 유지 가능(스크롤, 입력값 등)
- 하지만, 초기 로딩 속도가 느리다는 단점이 있음(전체 앱을 로드하기 때문)
- 검색 엔진 최적화를 추가로 따로 고려해야 함.(SEO)
- 복잡한 상태 관리가 필수적임.
SPA 라우팅에서 발생할 수 있는 문제점
단순한 전통 라우팅 방식과 다른 SPA 라우팅은 장점도 장점이지만, 몇 가지 문제점을 가지고 있습니다. 'SPA 라우팅의 장단점'에서 확장되는 내용이라고 보시면 좋을 거 같습니다.


- SEO 문제
- SPA는 서버에서 HTML을 반환하지 않기 때문에, 검색 엔진이 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.
- 이를 해결하기 위해서는 Next.js와 같은 프레임워크를 사용하여 SSR(Server-Side-Rendering)을 구현해야 합니다.
- 이슈 원인이 뭘까요?
- 검색 엔진은 서버에서 반환된 HTML을 기준으로 분석하기 때문입니다.
- SPA는 브라우저에서 JavaScript를 실행한 후에야 콘텐츠가 렌더링되므로, 검색 엔진이 JavaScript 실행 이전 상태(빈 HTML)만 보게 되는 것이 원인입니다.
- SSR을 구현하면 해결할 수 있다?
- Next.js와 같은 프레임워크를 사용하여 서버에서 HTML을 생성하고, 이를 검색엔진에 제공하는 원리로 해결 가능합니다.
- SSR로 렌더링된 HTML을 클라이언트에서 재활용하여 SPA의 기능을 유지할 수 있고, 특정 페이지를 정적으로 미리 렌ㄴ더링해서 HTML파일로 제공할 수도 있습니다.(Hydration, Prerendering)
- 브라우저 기록 관리
- Next.js에서 router.push()를 사용하면 브라우저의 뒤로가기 버튼 동작이 혼란스러울 수 있습니다.
- 왜 이런 문제가 발생할까요?
- router.push()는 브라우저의 기록에 새로운 경로를 추가하게 됩니다.
- 사용자가 뒤로가기 버튼을 누르면 이전 페이지로 이동하지만, SPA에서 동적인 데이터(서버에서 가져온 데이터나 사용자가 입력한 데이터 등)가 있을 경우 이를 처리하지 못할 수 있기 때문입니다.
- 즉, 비정상적인 상태가 되거나 데이터 손실이 있을 수 있다는 이야기입니다.
- 이를 해결하기 위해, router.replace()로 기록을 대체하거나, 기록 상태를 명시적으로 관리하면 해결할 수 있습니다.
- router.replace()는 기록을 추가하지 않고 기존 기록을 덮어씁니다.
- 결과적으로 뒤로가기 버튼으로 이전 페이지로 돌아가지 못한다는 것이죠.
- 초기 로딩 속도 문제
- SPA는 처음에 전체 JavaScript와 HTML을 로드해야 하므로, 초기 로딩 속도가 느려질 수 있습니다.
- 이를 해결하기 위해, 코드 스플리팅(Code Splitting)과 Lazy Loading을 활용하면 좋습니다.
- 이슈 원인이 뭘까요?
- 모든 페이지에 필요한 JavaScript와 스타일시트를 한 번에 로드하기 때문에 문제가 생깁니다.
- 불필요한 코드까지 로드되므로 초기 로딩 속도가 증가하는 것이죠.
- Code Splitting과 Lazy Loading을 이용한 해결책?
- Code Splitting : 애플리케이션을 작은 코드 조각으로 나누어, 필요한 페이지의 코드만 로드하는 방식으로, WebPack이나 Next.js에서 자동으로 코드 스플리팅 기능을 제공하고 있습니다.
- Lazy Loading : 사용자가 요청하는 시점에만 필요한 코드를 로드하는 방식으로, 이미지나 컴포넌트를 사용자가 스크롤할 때 로드시키는 방식입니다.
import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
ssr: false, // 서버에서 로드하지 않고 클라이언트에서만 로드
});
export default function Example() {
return <HeavyComponent />;
}
(코드 스플리팅)
const LazyImage = React.lazy(() => import('./ImageComponent'));
export default function Example() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyImage />
</React.Suspense>
);
}
(Lazy Loading)
끝내는 말
라우팅은 웹 애플리케이션에서 사용자의 이동 경로를 결정짓는 기능입니다! 이번 글에서는 전통적인 라우팅과 SPA 라우팅의 차이, 각각의 장단점에 대해 알아보았습니다.
전통적인 라우팅은 간단하고 안정적이며 SEO에 강하지만, 페이지 새로고침이 빈번하여 사용자 경험이 제한됩니다. 반면 SPA 라우팅은 부드럽고 빠른 화면 전환을 제공하지만, SEO 문제나 초기 로딩 속도와 같은 기술적 과제가 존재하죠. 이 두 가지 방식은 상호 베타적이지 않습니다. 프로젝트의 요구 사항과 사용자 경험을 고려하여 적절한 방식이나 혼합된 접근법(CSR + SSR)을 선택하는 것을 중요하게 생각해야 합니다.
읽어주셔서 감사합니다 :)
'JavaScript > React' 카테고리의 다른 글
React 컴포넌트란 무엇인가. (2) | 2024.12.29 |
---|---|
React에서 Debounce 사용하기 (1) | 2024.11.08 |
Context API로 전역 상태 관리하기 (2) | 2024.10.28 |
useRef란? (4) | 2024.10.23 |
useEffect: 클린업 함수의 필요성 (4) | 2024.10.14 |