소개
Angular 애플리케이션은 요즘 매우 흔히 사용됩니다. 이들은 싱글 페이지 애플리케이션(SPA)의 개념으로 빌드됩니다. 이러한 애플리케이션에서는 컴포넌트가 사용되기 때문에 웹 페이지 간의 라우팅이 기존 웹사이트와 다릅니다. Angular에서는 애플리케이션 전체를 라우팅하며 탐색하기 위해 RouterLink을 사용해야 합니다. RouterLink는 디렉티브이며, 컴포넌트 클래스 전반을 탐색할 수 있도록 Router.navigate 및 Router.navigateByURL 메서드를 제공합니다.
이 튜토리얼에서는 살펴볼 것입니다: RouterLink, Router.navigate, 및 Router.navigateByURL 을 코드 예제와 함께.
RouterLink
HTML에서 링크는 보통 다음과 같이 앵커 태그 <a>를 사용하여 삽입됩니다.
|
1 2 3 |
<a href="/sample"> 예제 HTML 링크. </a> |
이 예제 링크는 사용자를 /sample 페이지로 이동시킵니다. 하지만 위에서 언급했듯이, 싱글 페이지 애플리케이션(SPA)에는 링크할 다른 페이지가 없습니다. 대신 사용자에게 표시할 다른 뷰나 컴포넌트가 있습니다.
사용자가 탐색하고 뷰를 변경할 수 있도록 하려면 RouterLink 디렉티브를 href:
|
1 2 3 |
<a routerLink="/users/example"> 문자열을 사용하는 링크. </a> |
이 RouterLink 예제는 사용자를 /users/example에 있는 컴포넌트로 안내합니다. 다음 예제와 같이 서로 다른 URL 세그먼트를 배열로 전달할 수도 있습니다.
|
1 2 3 |
<a [routerLink]="['/', 'users', 'example']"> 배열을 사용한 링크 예제an array. </a> |
이 두 예제는 형식이 다르지만 여전히 /users/example의 동일한 컴포넌트로 연결됩니다..
-
상대 경로
RouterLink를 사용하면 상대 URL을 지정할 수 있습니다. ../을 사용하여 더 높은 수준의 탐색으로 이동할 수 있습니다. 이를 구현하는 방법은 다음과 같습니다:
|
1 2 3 |
<a [routerLink]="['../', 'parent', 'posts']"> 한 수준 위로 이동하는 링크. </a> |
위의 예에서 사용자가 /users/posts에 있다면, 탐색을 통해 사용자는 /posts/parent로 이동하게 됩니다. 또한 ./, ../를 사용하여 상대적으로 URL을 지정할 수도 있으며, 필요한 경우 앞에 슬래시를 붙이지 않을 수도 있습니다.
-
매개변수
라우트 간에 데이터를 전달해야 하는 시나리오가 있을 수 있습니다. 간단한 예로 사용자가 양식을 작성하고 추가 세부 정보를 위해 양식의 다음 부분으로 이동하는 경우가 있습니다.
매개변수를 전달하기 위해, 데이터를 캡슐화하는 객체가 URL 세그먼트 목록에 전달됩니다:
|
1 2 3 |
<a [routerLink]="['/', 'users', {display: 'sample'}, 'xyz']"> 매개변수가 있는 링크. </a> |
위에서 Router는 /users;display=sample/xyz로 이동합니다..
-
이름이 지정된 아울렛
이름이 지정된 라우터 아울렛은 단순히 이름이 있는 라우터 아울렛입니다. 이에 대한 코드를 살펴보겠습니다:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { side: [xyz] } }]"> 사이드 아울렛이 있는 링크. </a> |
이 예제에서 xyz 세그먼트는 side라는 이름의 아울렛에 배치됩니다. 아래와 같이 여러 개의 이름이 지정된 아울렛을 지정할 수도 있습니다:
|
1 2 3 |
<a [routerLink]="['/', 'users', { outlets: { first: ['abc'], second: ['xyz'] } }]"> 첫 번째 및 두 번째 아울렛이 있는 링크. </a> |
이렇게 하면 first 세그먼트가 abc로 대체되고, second 세그먼트는 xyz로 대체됩니다..
Router
Angular에서 Router 클래스는 경로를 정의하고 이를 통해 탐색하는 데 사용됩니다. 이는 다음 두 가지 메서드를 통해 수행됩니다: Router.navigate 및 Router.navigateByUrl. 이 두 메서드는 모두 프로미스를 반환합니다. 이 프로미스는 세 가지 값을 가질 수 있습니다: true, false, 또는 null.
-
값은 true 탐색이 성공했을 때입니다.
-
값은 null 탐색이 없을 때입니다.
-
그리고 false 어떤 이유로든 탐색이 실패했을 때입니다.
애플리케이션에서 이러한 메서드를 사용하려면 먼저 Router 클래스를 컴포넌트 클래스에 가져와야 합니다:
|
1 |
import { Router } from '@angular/router'; |
다음으로, 이 Router를 생성자에서 의존성으로 주입해야 합니다:
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ // ... }) export class AppComponent { constructor(private router: Router) { // ... } // ... } |
이 설정이 완료되면 애플리케이션에서 Router.navigate 및 Router.navigateByUrl 메서드를 사용할 준비가 된 것입니다.
Router.navigate
The Router.navigate 메서드는 URL 세그먼트 배열을 허용합니다. 기본적인 Router.navigate 코드 예시를 살펴보겠습니다:
|
1 2 3 |
navigateToUsersPage() { this.router.navigate(['/', 'users']); } |
Router.navigateByUrl
마지막으로, Router.navigateByUrl을 살펴보겠습니다. 이 메서드는 Router.navigate와 유사하지만, URL 세그먼트를 허용하는 대신 URL을 지정하는 문자열을 허용합니다. 이 탐색은 절대 경로여야 하며 시작 부분에 / 이 있어야 합니다:
|
1 2 3 |
navigateToUsersPage() { this.router.navigateByUrl('/users;all=true'); } |
위 코드는 사용자를 /users;all=true 페이지로 이동시킵니다.
결론
이 튜토리얼에서는 RouterLink를 사용하여 Angular 앱을 탐색하는 방법을 살펴보았습니다. Angular 앱에서의 라우팅은 싱글 페이지 애플리케이션(Single-Page Application)이기 때문에 기존 웹 애플리케이션과는 약간 다릅니다. RouterLink와 그 기능을 이해하면 개발자가 견고한 라우팅을 구축하는 데 도움이 될 수 있습니다.
Angular 앱은 Node.js를 런타임으로 사용합니다. Node.js와 Node.js 애플리케이션을 배포하는 방법에 대해 자세히 알아보려면 다음 튜토리얼을 참고하세요:
- Ubuntu 18.04에 Node.js를 설치하는 방법
- Node.js 애플리케이션 설정: Ubuntu 20.04에서 Node.js로 프로덕션 작업을 수행하는 방법
- Ubuntu 20.04에서 Docker를 사용하여 Node.js(Express.js) 앱을 배포하는 방법
즐거운 컴퓨팅 되세요!
댓글
아직 댓글이 없습니다. 첫 번째로 작성해 보세요.