라우팅(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 /> 를 추가해 봅시다.

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

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

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