그 밖의 일반적인 라우팅 작업

이 문서에서는 애플리케이션에서 Angular 라우터를 사용할 때 자주 수행하는 다른 작업을 알아봅니다.

라우팅 규칙 정보 가져오기

사용자가 애플리케이션을 탐색하는 동안 한 컴포넌트에서 다른 컴포넌트로 정보를 전달해야 하는 경우가 많습니다. 예를 들어 식료품 쇼핑 목록을 표시하는 애플리케이션을 생각해 보겠습니다. 목록의 각 항목에는 고유한 id가 있습니다. 사용자가 항목의 Edit 버튼을 클릭하면 EditGroceryItem 컴포넌트가 열립니다. 이 컴포넌트는 사용자에게 올바른 정보를 표시할 수 있도록 해당 식료품의 id를 가져와야 합니다.

이런 정보는 라우팅 규칙으로 애플리케이션 컴포넌트에 전달할 수 있습니다. provideRouter의 withComponentInputBinding 기능이나 RouterModule.forRoot의 bindToComponentInputs 옵션을 사용하세요.

라우팅 규칙 정보를 가져오는 방법은 다음과 같습니다.

1. withComponentInputBinding 추가하기

   provideRouter 메서드에 withComponentInputBinding 기능을 추가하세요.

   providers: [provideRouter(appRoutes, withComponentInputBinding())];

2. 컴포넌트에 input 추가하기

   파라미터 이름과 일치하는 input() 프로퍼티를 컴포넌트에 추가하세요.

   id = input.required<string>();
   hero = computed(() => this.service.getHero(this.id()));

3. 선택 사항: 기본값 사용하기

   withComponentInputBinding을 활성화하면 라우터가 현재 라우팅 규칙을 기준으로 모든 입력 프로퍼티에 값을 할당합니다. 선택적 쿼리 파라미터가 없는 경우처럼 입력 프로퍼티의 키와 매칭되는 라우팅 규칙 데이터가 없으면 undefined를 할당합니다. 입력 프로퍼티가 라우팅 규칙과 매칭되지 않을 가능성이 있다면 input의 타입에 undefined를 포함해야 합니다.

   입력 프로퍼티의 transform 옵션을 사용하거나 linkedSignal로 로컬 상태를 관리하면 기본값을 제공할 수 있습니다.

   id = input.required({
     transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
   });
   // 또는
   id = input<string | undefined>();
   internalId = linkedSignal(() => this.id() ?? getDefaultId());

입력 프로퍼티 바인딩 우선순위

여러 라우팅 데이터 소스에서 같은 키를 정의하면 라우터는 다음 우선순위에 따라 충돌을 해결합니다. 위쪽 항목의 우선순위가 더 높습니다.

1. 라우팅 규칙 리소스: 라우팅 규칙의 resources 맵에 정의된 값입니다. 블로킹 리소스는 내부 값(resource.value())을 바인딩하고, 논블로킹 리소스는 Resource 인스턴스를 바인딩합니다.
2. 라우팅 규칙 데이터와 리졸버: data에 정의한 정적 데이터 또는 resolve로 가져온 값입니다.
3. 경로 파라미터와 매트릭스 파라미터: URL 경로의 파라미터(:id 등)와 매트릭스 파라미터입니다.
4. 쿼리 파라미터: 쿼리 문자열의 파라미터(?id=123 등)입니다.

예를 들어 경로 파라미터 :id와 쿼리 파라미터 ?id=...가 모두 있으면 경로 파라미터 값이 컴포넌트의 id 입력 프로퍼티에 바인딩됩니다. 라우팅 규칙에 id라는 리소스도 정의되어 있다면 리소스 값이 두 파라미터보다 우선합니다.

쿼리 파라미터 바인딩 비활성화하기

쿼리 파라미터를 별도로 관리한다면 ComponentInputBindingOptions로 쿼리 파라미터 바인딩을 비활성화하세요.

provideRouter(appRoutes, withComponentInputBinding({queryParams: false}));

라우터 데이터에 없는 입력 프로퍼티의 동작 설정하기

기본적으로 내비게이션 중에 라우터 데이터에 없는 입력 프로퍼티는 undefined로 설정됩니다. 이전 데이터가 남아 있지 않도록 하는 동작입니다.

활성 컴포넌트 인스턴스의 라우터 데이터에 한 번도 없었던 입력 프로퍼티에는 undefined를 설정하지 않으려면 unmatchedInputBehavior 옵션을 'undefinedIfStale'로 지정하세요.

provideRouter(appRoutes, withComponentInputBinding({unmatchedInputBehavior: 'undefinedIfStale'}));

unmatchedInputBehavior: 'undefinedIfStale'과 queryParams: false를 함께 사용하면 라우터가 명시적으로 제공하지 않은 입력 프로퍼티는 초기값을 유지합니다. 다만 매트릭스 파라미터는 예외입니다. 한 내비게이션에서 제공한 매트릭스 파라미터가 다음 내비게이션에서 제거되면, 이전 데이터를 유지하지 않도록 라우터가 입력 프로퍼티를 undefined로 설정합니다.

provideRouter(
  appRoutes,
  withComponentInputBinding({
    queryParams: false,
    unmatchedInputBehavior: 'undefinedIfStale',
  }),
);

부모 라우팅 규칙 데이터 상속하기

기본적으로 자식 라우팅 규칙은 부모 라우팅 규칙의 파라미터와 데이터를 상속합니다(paramsInheritanceStrategy: 'always'와 같습니다). 따라서 자식 컴포넌트에서 부모 라우팅 규칙 정보에 직접 접근할 수 있습니다.

빈 경로 라우팅 규칙에서만 파라미터를 상속하던 이전 동작이 필요하다면 paramsInheritanceStrategy를 'emptyOnly'로 지정하세요.

provideRouter(routes, withRouterConfig({paramsInheritanceStrategy: 'emptyOnly'}));

다른 설정의 자세한 내용은 라우터 설정 옵션을 참고하세요.

404 페이지 표시하기

404 페이지를 표시하려면 와일드카드 라우팅 규칙을 설정하고 component 프로퍼티에 404 페이지용 컴포넌트를 지정하세요.

const routes: Routes = [
  {path: 'first-component', component: First},
  {path: 'second-component', component: Second},
  {path: '**', component: PageNotFound}, // 404 페이지를 위한 와일드카드 라우팅 규칙
];

마지막의 path가 **인 라우팅 규칙이 와일드카드 라우팅 규칙입니다. 요청한 URL이 목록의 앞쪽 경로들과 매칭되지 않으면 라우터는 이 라우팅 규칙을 선택해서 사용자를 PageNotFound로 보냅니다.

링크 파라미터 배열

링크 파라미터 배열에는 라우터 내비게이션을 위한 다음 정보가 들어 있습니다.

• 목적지 컴포넌트의 라우팅 규칙 경로
• 라우팅 규칙 URL에 포함할 필수 및 선택적 라우팅 규칙 파라미터

다음과 같이 RouterLink 디렉티브에 배열을 바인딩하세요.

<a [routerLink]="['/heroes']">Heroes</a>

라우팅 규칙 파라미터를 지정하면 다음처럼 두 항목으로 된 배열이 됩니다.

<a [routerLink]="['/hero', hero.id]">
  <span class="badge">{{ hero.id }}</span
  >{{ hero.name }}
</a>

선택적 라우팅 규칙 파라미터는 { foo: 'foo' }처럼 객체로 전달하세요.

<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>

이 문법은 특정 URL 세그먼트에 연결된 선택적 파라미터인 매트릭스 파라미터를 전달합니다. 매트릭스 파라미터를 더 알아보세요.

이 세 가지 예제로 라우팅 계층이 하나인 애플리케이션을 구성할 수 있습니다. 하지만 위기 센터 예제처럼 자식 라우터가 있다면 링크 배열을 더 다양하게 구성할 수 있습니다.

다음의 간단한 RouterLink 예제는 위기 센터에 지정된 기본 자식 라우팅 규칙을 기반으로 합니다.

<a [routerLink]="['/crisis-center']">Crisis Center</a>

다음 내용을 확인해 보세요.

• 배열의 첫 항목은 부모 라우팅 규칙(/crisis-center)을 가리킵니다.
• 이 부모 라우팅 규칙에는 파라미터가 없습니다.
• 자식 라우팅 규칙에는 기본값이 없기 때문에 하나를 선택해야 합니다.
• 라우팅 규칙 경로가 /인 CrisisList로 이동하지만 슬래시를 명시적으로 추가할 필요는 없습니다.

애플리케이션 루트에서 Dragon Crisis로 이동하는 다음 라우터 링크를 살펴보세요.

<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>

• 배열의 첫 항목은 부모 라우팅 규칙(/crisis-center)을 가리킵니다.
• 이 부모 라우팅 규칙에는 파라미터가 없습니다.
• 두 번째 항목은 특정 위기의 상세 내용을 표시하는 자식 라우팅 규칙(/:id)을 가리킵니다.
• 상세 정보 자식 라우팅 규칙에는 id 라우팅 규칙 파라미터가 필요합니다.
• Dragon Crisis의 id를 배열의 두 번째 항목(1)으로 추가했습니다.
• 결과 경로는 /crisis-center/1입니다.

위기 센터 라우팅 규칙만 사용하도록 App 템플릿을 다시 정의할 수도 있습니다.

@Component({
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a [routerLink]="['/crisis-center']">Crisis Center</a>
      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
    </nav>
    <router-outlet />
  `,
})
export class App {}

라우팅 계층이 하나, 둘 또는 그 이상인 애플리케이션을 작성할 수 있습니다. 링크 파라미터 배열을 사용하면 어떤 깊이의 라우팅이든 표현할 수 있습니다. 라우팅 규칙 경로, (필수) 라우터 파라미터, (선택적) 라우팅 규칙 파라미터 객체를 유효한 순서로 유연하게 조합할 수 있습니다.

LocationStrategy와 브라우저 URL 형식

라우터가 새 컴포넌트 뷰로 이동하면 해당 뷰의 URL로 브라우저 위치와 히스토리를 갱신합니다.

최신 HTML5 브라우저는 서버에 페이지를 요청하지 않고 브라우저 위치와 히스토리를 변경하는 history.pushState를 지원합니다. 라우터는 일반적으로 페이지를 로드할 때 사용하는 URL과 구별되지 않는 "자연스러운" URL을 구성할 수 있습니다.

"HTML5 pushState" 형식의 위기 센터 URL은 다음과 같습니다.

localhost:3002/crisis-center

이전 브라우저는 위치 URL이 바뀌면 서버에 페이지를 요청합니다. 다만 "해시"라고 부르는 "#" 뒤의 내용만 바뀌면 요청하지 않습니다. 라우터는 이 특성을 활용해서 애플리케이션 내부 라우팅 규칙 URL을 해시로 구성할 수 있습니다. 다음은 위기 센터로 이동하는 "해시 URL"입니다.

localhost:3002/src/#/crisis-center

라우터는 두 가지 LocationStrategy 프로바이더로 두 형식을 모두 지원합니다.

RouterModule.forRoot() 함수는 LocationStrategy를 PathLocationStrategy로 설정하므로 이 방식이 기본 전략입니다. 부트스트랩 과정에서 이 설정을 재정의해서 HashLocationStrategy로 변경할 수도 있습니다.