Angular 라우팅

Angular 라우팅 (Routing)

클릭할 때마다 페이지 전체가 새로 로드되는 전통적인 방식과 달리, 싱글 페이지 애플리케이션(SPA)은 첫 페이지를 받은 뒤에는 URL에 따라 화면의 일부만 바꿔요. 이렇게 "지금 URL에 맞는 화면을 보여주는" 역할을 하는 게 라우터예요. Angular Router(@angular/router)는 Angular 애플리케이션의 내비게이션을 관리하는 공식 라이브러리로, Angular CLI로 만든 모든 프로젝트에 기본 포함돼 있어요.

출처: 공식 문서 — Angular 라우팅 (Routing)

SPA에서 라우팅이 왜 필요할까요

브라우저에서 URL을 열면 보통 웹 서버에 네트워크 요청을 보내고 돌아온 HTML 페이지를 표시해요. 다른 URL로 이동하면 다시 요청을 보내 페이지 전체를 새것으로 교체하죠.

싱글 페이지 애플리케이션은 다르게 동작해요. 첫 페이지(index.html)만 서버에 요청하고, 이후에는 클라이언트 쪽 라우터가 URL에 따라 어떤 내용을 보여줄지 제어해요. 사용자가 다른 URL로 이동하면 전체 페이지를 새로 로드하지 않고 그 자리에서 콘텐츠를 갱신해요.

Angular는 라우팅을 어떻게 관리하나요

Angular의 라우팅은 세 가지 핵심 요소로 이루어져요.

  1. 라우트(Routes) — 사용자가 특정 URL에 방문했을 때 어떤 컴포넌트를 보여줄지 정의해요
  2. 아울렛(Outlets) — 템플릿 안의 자리 표시자로, 활성 라우트에 따라 컴포넌트를 동적으로 불러와 렌더링해요
  3. 링크(Links) — 전체 페이지를 새로 로드하지 않고도 사용자가 라우트 사이를 이동하게 해주는 방법이에요

여기에 더해 Angular 라우팅 라이브러리는 이런 부가 기능도 지원해요.

  • 중첩 라우트(nested routes)
  • 프로그래매틱 내비게이션(코드로 이동)
  • 라우트 파라미터·쿼리·와일드카드
  • ActivatedRoute를 통한 활성 라우트 정보
  • 뷰 전환 효과
  • 내비게이션 가드(navigation guards)

더 알아보기 (Learn more)