라우팅(Routing) 개요

웹앱은 대부분 여러 화면을 전환하며 동작합니다. 그래서 라우팅은 사용자가 느끼는 앱 성능 중에서도 큰 영향을 미치는 요소입니다.

이번 예제에서는 Angular Router를 사용할 수 있도록 앱을 구성하는 방법을 알아봅시다.

1. app.routes.ts 파일을 생성합니다

   app.routes.ts 파일에서 이런 내용을 수정해 봅시다:

   1. @angular/router 패키지로 제공되는 Routes를 불러옵니다.
   2. Routes 타입으로 선언한 routes를 파일 외부로 내보냅니다. 이 변수는 값을 []로 지정하는 배열 타입입니다.

   import {Routes} from '@angular/router';
   
   export const routes: Routes = [];

2. 프로바이더에 라우팅 규칙을 추가합니다

   app.config.ts 파일을 열고 다음 단계로 Angular Router를 설정합니다:

   1. @angular/router 패키지로 제공되는 provideRouter 함수를 불러옵니다.
   2. ./app.routes.ts 파일에 선언한 routes 를 불러옵니다.
   3. providers 배열에서 provideRouter 함수를 실행하면서 routes 를 인자로 전달합니다.

   import {ApplicationConfig} from '@angular/core';
   import {provideRouter} from '@angular/router';
   import {routes} from './app.routes';
   
   export const appConfig: ApplicationConfig = {
     providers: [provideRouter(routes)],
   };

3. 컴포넌트에서 RouterOutlet 를 로드합니다

   마지막으로 Angular Router를 사용하려면 원하는 화면을 앱의 어느 위치에 표시할지 지정해야 합니다. 이 위치는 @angular/router로 제공되는 RouterOutlet 디렉티브로 지정합니다.

   App 컴포넌트의 템플릿을 수정해서 <router-outlet /> 를 추가해 봅시다.

   @Component({
   ...
   template: `
       <nav>
         <a href="/">Home</a>
         |
         <a href="/user">User</a>
       </nav>
       <router-outlet />
     `,
   imports: [RouterOutlet],
   })
   export class App {}

이제 Angular Router를 사용할 준비가 모두 끝났습니다. 잘 하셨습니다! 🙌

라우팅 규칙을 선언하는 방법은 다음 단계에서 알아봅시다.