@ionic/angular는 아이오닉의 도구나 API를 앵귤러 개발자가 쉽게 사용할 수 있도록 해준다. 아이오닉 4에서는 앱 빌드나 라우팅와 같은 앵귤러 스택을 그대로 사용하기 때문에 앵귤러의 일련의 에코시스템에서 동일 선상에서 개발이 가능하다. 또한 앵귤러에서 제공되는 기능 외에 더 많은 기능이 필요한 경우 @ionic/angular-toolkit 모듈에서 제공되고 있다.
앵귤러의 생명주기
아이오닉은 다음과 같은 앵귤러에서 제공되는 생명주기 훅 메소드를 모두 사용할 수 있다. 더 자세한 정보는 여기서 확인할 수 있다.
ngOninit:@Input과 같은 모든 속성이 초기화가 완료된 시점에 딱 한번 호출된다. 보통 이 이벤트에서 멤버 변수를 초기화하거나 서비스 호출이 일어난다.ngOnDestroy: 컴포넌트가 소멸되기 직전에 호출된다. 옵저버블의 구독 취소와 같이 사용하고 있는 자원을 정리하는데 유용하다.
아이오닉의 페이지 이벤트
아이오닉은 앞서 본 앵귤러의 생명주기 이벤트 외에 몇가지 이벤트를 더 제공하고 있다.
ionViewWillEnter:ngOninit이후 페이지 전환이 일어나기 전 이벤트 발생한다.ionViewDidEnter: 페이지 전환이 모두 완료된 후 이벤트 발생한다.ionViewWillLeave: 현재 페이지에서 나가기 직전에 이벤트 발생한다.ionViewDidLeave: 현재 페이지에서 완전히 나간 후 새로운 페이지로 완전히 전환된 후, 즉 새 페이지의ionViewDidEnter이후에 이벤트 발생한다.
페이지 핸들링
아이오닉은 <ion-router-outlet>이라는 라우터 아울렛을 가지고 있다. 이 아울렛은 앵귤러의 <router-outlet>을 확장하여 모바일 디바이스에서 더 나은 사용자 경험을 제공할 수 있는 몇가지 기능이 추가되었다.
<ion-router-outlet>은 앵귤러와 약간 다르게 네비게이션을 수행한다. 새로운 페이지로 네비게이션 될때 아이오닉은 이전 페이지를 DOM에서 유지하고 있다. 물론 이전 페이지는 숨기고 새로운 페이지로 전환을 한다. 이렇게 하는 이유는 두가지가 있다.
- 이전 페이지의 상태(화면 상의 데이터, 스크롤 위치 등)을 유지할 수 있다.
- 이미 DOM에는 존재하기 때문에 다시 만들 필요가 없으며 더 부드럽게 이전 페이지로 전환할 수 있다.
DOM에서 페이지가 제거되는 상황은 UI 상의 버튼이나 브라우저의 뒤로가기 버튼을 눌러 pop이 되었을 때만이다. 이러한 특별한 취급 때문에 ngOninit이나 ngOnDestory가 일반적으로 생각했을 때와 다르게 동작할 때가 있어 주의가 필요하다.
ngOninit은 당연히 새로운 페이지를 생성할 때마다 호출되지만 페이지가 뒤로 이동할 때는 호출되지 않는다. 예를 들어 탭 인터페이스에서 처음으로 각 탭을 클릭하여 진입했을 때에는 ngOninit이 호출되지만 두번째 진입부터는 호출되지 않는다. ngOnDestory는 페이지가 pop되었을 때에만 호출된다.
라우트 가드
아이오닉 3에서는 페이지가 라우팅이 되어 진입하기 전이나 진입 후 나가려고 할 때 ionViewCanEnter 또는 ionViewCanLeave와 같은 훅 메서드를 사용했었다. 그래서 허가되지 않은 사용자로부터 페이지를 진입을 못하게 하거나 사용자가 입력 폼에 작성 중에 페이지를 나가려고 할 때 확인을 받는 등의 대처를 할 수 있었다.
하지만 이러한 방법은 아이오닉 4에서는 앵귤러의 가드를 사용하기 위해 제거되었다. 따라서 앵귤러의 CanActivate와 CanDeactivate 인터페이스로 동일하게 구현할 수 있게 되었다.
구현 방법은 다음과 같다. 먼저 사용자 권한을 검사하는 가드를 CanActivate 인터페이스를 구현하여 생성한다.
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.authService.isAuthenticated();
}
}
그 다음 라우트를 정의할 때 canActivate에 생성한 가드를 추가하면 된다.
{ path: 'admin', canActivate: [AuthGuard], loadChildren: '...', }
