@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: '...', }