Angular Router는 URL 경로를 컴포넌트에 매핑하여, 전체 페이지 새로고침 없이 단일 페이지 앱에서의 내비게이션을 가능하게 합니다. 경로를 컴포넌트에 연결하는 라우트 구성 배열을 정의합니다.
라우트 정의하기
ts
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( m.) },
{ : , : },
];
<!-- 라우터는 매칭된 컴포넌트를 여기에 렌더링한다 -->
<router-outlet></router-outlet>
<a routerLink="/users" routerLinkActive="active">Users</a>
<a [routerLink]="['/users', user.id]">View {{ user.name }}</a> <!-- 동적 경로 -->
routerLink는 새로고침 없는 클라이언트 측 내비게이션을 수행하고, routerLinkActive는 링크의 라우트가 활성화되었을 때 CSS 클래스를 추가합니다. 내비게이션 강조 표시에 유용합니다.
import { Router } from "@angular/router";
export class LoginComponent {
constructor(private router: Router) {}
onLogin() {
this.router.navigate(["/dashboard"]); // 어떤 동작 이후 내비게이션
}
}
import { ActivatedRoute } from "@angular/router";
export class UserDetailComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// URL에서 :id 읽기 (params는 변경될 수 있으므로 Observable)
this.route.params.subscribe(p => this.userId = p["id"]);
// 또는 일회성 읽기를 위한 snapshot:
const id = this.route.snapshot.paramMap.get("id");
}
}
중첩/자식 라우트, 라우트 가드(인증), resolver(데이터 사전 가져오기),
쿼리 매개변수, 코드 분할을 위한 기능 라우트의 lazy loading.
Router는 Angular를 여러 뷰를 가진 SPA로 만들어줍니다. 빠른 클라이언트 측 내비게이션, URL 기반 UI, 그리고 딥 링크 가능한 페이지를 제공합니다.
라우트 구성, <router-outlet>, routerLink 대 프로그래밍 방식의 Router.navigate, 그리고 ActivatedRoute를 통한 매개변수 읽기를 아는 것은 어떤 Angular 애플리케이션의 일상적 라우팅 요구도 충족하며, 가드와 lazy loading은 이 기초 위에 세워집니다.