Angular 라우터(@angular/router)는 Angular 애플리케이션의 내비게이션을 관리하는 공식 라이브러리이며, 프레임워크의 핵심 구성 요소입니다.
Angular CLI로 생성한 모든 프로젝트에 기본으로 포함됩니다.
SPA에 라우팅이 필요한 이유
웹 브라우저에서 URL로 이동하면 일반적으로 브라우저가 웹 서버에 네트워크 요청을 보내고, 반환된 HTML 페이지를 표시합니다. 링크를 클릭하는 등 다른 URL로 이동하면 브라우저가 다시 네트워크 요청을 보내고 전체 페이지를 새 페이지로 교체합니다.
싱글 페이지 애플리케이션(SPA)은 첫 페이지인 index.html을 가져올 때만 브라우저가 웹 서버에 페이지를 요청한다는 점이 다릅니다.
그 이후에는 클라이언트 라우터가 URL을 기준으로 표시할 내용을 제어합니다.
사용자가 다른 URL로 이동하면 라우터가 전체 페이지를 다시 로드하지 않고 현재 페이지의 내용을 갱신합니다.
Angular의 라우팅 관리 방식
Angular 라우팅은 크게 세 가지로 구성됩니다.
- 라우팅 규칙은 사용자가 특정 URL에 방문했을 때 표시할 컴포넌트를 정의합니다.
- 아웃렛은 활성 라우팅 규칙을 기준으로 컴포넌트를 동적으로 로드하고 렌더링할 위치를 템플릿에 지정합니다.
- 링크는 전체 페이지를 다시 로드하지 않고 애플리케이션의 여러 라우팅 규칙 사이를 이동하는 수단입니다.
Angular 라우팅 라이브러리는 다음 기능도 제공합니다.
- 중첩 라우팅 규칙
- 코드로 실행하는 내비게이션
- 라우팅 규칙 파라미터, 쿼리, 와일드카드
ActivatedRoute로 확인하는 활성 라우팅 규칙 정보- 라우팅 규칙 리소스와 리졸버로 데이터 가져오기
- 뷰 전환 효과
- 내비게이션 가드
다음 단계
Angular 라우터로 라우팅 규칙을 정의하는 방법을 알아보세요.