Ionic angular life cycle (생명주기) 정리

 

 

Page life Cycle( 생명 주기 ) 

 

Ionic 페이지 생명 주기 

ionic 페이지 생명 주기는 아래 순서대로 이벤트가 발생한다.  ionic에서 angular의 생명주기 이벤트도 수용하고

있기 때문에, angular 로 구현되어 있다면 angular의 lifecycle도 같이 고려해 봐야 한다.

 

 

 

1.ngOnInit

2.ionViewWillEnter

3.ionViewDidEnter

4.ionViewWillLeave

5.ionViewDidLeave

6.ngOnDestory

 

라이프 사이클 순서로, 1번과 6번을 제외하고 비슷한 단어라 유추하기 쉽다.

1번과 6번은 angular에서 제공하는 대표적인 생명 주기 이벤트  이고 나머지는 ionic에서 제공하기 때문에 ion이라는 키워드가 붙는다.

 

Angular 생명주기 이벤트

1. ngOnInit : 컴포넌트 초기화 중에 1번 실행된다. 로컬 멤버를 초기화하고 딱 한 번만 수행하면 되는 서비스를 호출할 때 사용한다.

 

6. ngOnDestroy : Angular 가 해당 뷰를 파괴하기 직전에 실행된다. 예를 Observable 구독 취소 같이 정리시에 유용하게 사용된다.

 

 

Ionic 생명주기 이벤트

Ionic 생명주기 간략 정리하면 처음 페이지 들어갈 경우 2, 3번이 호출되고 해당 페이지 나가면  4~5번이 호출된다.

 

2. ionViewWillEnter :

페이지가 로드되고, active 되기 전에 호출된다. 

event listener 등 뷰에 진입하는 초기에 해야 하는 작업들을 선언하기에 적합하다.

 

3.ionViewDidEnter :

페이지가 active 된 직후에 호출된다.

직전의 ionViewWillEnter와 비슷하게 사용한다.

(데이터 로드 시 ionViewWillEnter를 사용해 성능 문제가 발생하면 대신 ionViewDidEnter에서 데이터 호출을 수행할 수 있음)

 

4. ionViewWillLeave :

페이지에서 나가고, active 상태가 해제되기 직전에 호출된다.

event listener의 해제 등, 페이지를 나가는 시점에 해야 하는 작업들을 선언하기에 적합하다.

 

5. ionViewDidLeave :

페이지가 active 상태가 해제된 직후에 호출된다.

 

페이지에서 나갈때

ionicViewWillLeave -> ionViewDidLeave -> ngOnDestroy

 

 

---

With Angular Life Cycle

 

아이오닉 angular 구현되어 있다면, angular lifeCycle도 같이 고려해야 하는데

자주 사용 되는 angular lifeCycle을 정리해 보겠다.

 

ngOnInit(): void {
  console.log('ngOnInit');    
}

ngAfterViewInit(): void {
  console.log('ngAfterViewInit');    
}

ngAfterContentInit(): void {
  console.log('ngAfterContentInit');    
}

ngOnDestroy(): void {
  console.log('ngOnDestroy');    
}

 

페이지가 시작될 때, 아래와 같이 로그가 찍힌다.

• ngOnInit -> ngAfterContentInit -> ngAfterViewInit

 

페이지에서 나갈 때, 아래와 같이 로그가 추가된다.

• ngOnInit -> ngAfterContentInit -> ngAfterViewInit -> ngOnDestroy (추가) 

 

ionic + angular 

모든 life Cycle 을 합쳐서, 순서 파악

ngOnInit(): void {
  console.log('ngOnInit');    
}

ngAfterViewInit(): void {
  console.log('ngAfterViewInit');    
}

ngAfterContentInit(): void {
  console.log('ngAfterContentInit');    
}

ngOnDestroy(): void {
  console.log('ngOnDestroy');    
}

ionViewDidEnter(): void {
  console.log('ionViewDidEnter');    
}

ionViewWillEnter(): void {
  console.log('ionViewWillEnter');    
}

ionViewDidLeave(): void {
  console.log('ionViewDidLeave');    
}

ionViewWillLeave(): void {
  console.log('ionViewWillLeave');    
}

 

페이지 진입 시 ( 순서 ) 

ngOnInit => ngAfterContentInit -> ngAfterViewInit -> ionViewWillEnter -> ionViewDidEnter

 

페이지에서 나갈때 ( 순서 ) 

ionViewWillLeave -> ionViewDidLeave -> ngOnDestroy 순이다.

 

정리 

페이지 진입 시에는 angular가 먼저 시작된 후 ionic이 실행되며,

페이지를 나갈 때에는 ionic이 먼저 종료된 이후, angular가 종료된다.