Angular / Ionic Router Outlet

ion-router-outlet이란?

ion-router-outlet은 Angular의 router-outlet과 비슷하게, Ionic 애플리케이션에서 페이지 전환과 라우팅을 담당하는 컴포넌트입니다. Angular의 router-outlet은 페이지의 교체에 중점을 두는 반면, ion-router-outlet은 Ionic 앱 특유의 애니메이션 효과와 내비게이션 스택 관리를 지원하여 더 나은 사용자 경험을 제공합니다.

Ionic의 내비게이션 구조와 ion-router-outlet의 역할

Ionic에서는 스택 기반의 내비게이션 구조를 사용하여 이전 페이지로 쉽게 돌아갈 수 있습니다. ion-router-outlet을 통해 페이지 전환 시마다 이전 페이지를 스택에 쌓아두고, ion-back-button을 통해 뒤로 이동하는 내비게이션 기능을 제공합니다.

덕분에 애플리케이션 내에서 사용자 경험을 개선하는 자연스러운 전환 효과를 구현할 수 있습니다.

 

기본 사용 방법

기본적인 ion-router-outlet 설정을 알아보겠습니다. Ionic에서는 페이지별 모듈을 사용하여 지연 로딩을 적용하는 것이 일반적입니다.

 

1.라우트 설정

먼저, app-routing.module.ts 파일에서 각 페이지에 대한 라우트를 설정합니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home/home.page';

const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'details',
    loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

 

 

2.템플릿 파일에서 ion-router-outlet 추가

app.component.html 파일에 ion-router-outlet을 추가하여 라우트를 출력할 위치를 지정합니다.

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

 

이제 HomePage에서 DetailsPage로 이동할 때 ion-router-outlet이 자동으로 페이지 전환을 관리해 줍니다.

 

페이지 전환 시 애니메이션 적용

ion-router-outlet은 Ionic 특유의 전환 애니메이션을 제공하여 사용자 경험을 더욱 매끄럽게 합니다.

별도의 코드 작성 없이 기본 애니메이션이 적용되지만, 커스터마이징도 가능합니다.

// HomePage에서 DetailsPage로 이동 예시
this.router.navigate(['details'], {
  animated: true, // 애니메이션 활성화
  animationDirection: 'forward' // 전환 방향 설정
});

 

이와 같이 animated 옵션을 통해 애니메이션을 활성화하거나, animationDirection으로 애니메이션 방향을 설정할 수 있습니다.

 

고급 설정: 페이지 간 데이터 전달

ion-router-outlet을 사용할 때 페이지 간에 데이터를 전달할 수 있습니다.

예를 들어 HomePage에서 DetailsPage로 데이터를 전달하는 방법은 다음과 같습니다.

 

HomePage에서 데이터 전달

// HomePage.ts
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToDetails() {
  this.router.navigate(['details'], {
    queryParams: { id: '123', name: 'Sample' }
  });
}

 

DetailsPage에서 데이터 수신

// DetailsPage.ts
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params); // { id: '123', name: 'Sample' }
  });
}

 

 

자주 발생하는 문제 해결 팁

1. 애니메이션이 제대로 작동하지 않는 경우: animated: true 옵션을 확인하고, 다른 라이브러리나 스타일 충돌 여부를 점검합니다.
2. 라우트 파라미터 전달 문제: queryParams 사용 시 값이 제대로 전달되지 않는 경우, subscribe를 활용해 정확하게 데이터가 넘어오는지 확인합니다.
3. 네이티브 플랫폼 문제: 네이티브 빌드 시 애니메이션이 예상과 다르게 작동할 수 있으니, 필요할 경우 플랫폼별 설정을 별도로 처리하는 것이 좋습니다.