카카오맵 지도를 사용하던 중,

  ngOnInit() {
    this.createMap();
  }
  
  ionViewDidEnter() {    
    this.checkPermissions()
    .then(() => {
        this.getBathroomList();
      });
  }

위와 같이 코드를 작성하면 ngOnInit()에서 생성된 객체를 ionViewDidEnter() 에서 읽지 못하는 사태가 발생했다.

Error: Uncaught (in promise): TypeError: Cannot read properties of undefined 

해당 오류는 lifecycle을 정확하게 이해하지 못하고 코드를 작성해, 코드의 실행 순서가 예상과 다른 것에 따른 에러라고 예상했다.

이참에 ionic에서의 life cycle을 정리해보기로 했다.

---

Ionic LifeCycle

아이오닉에서 주로 이용되는 생명주기는 다음과 같다.

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

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

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

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

우선 위의 코드를 실행해보자. 처음 페이지에 들어갈 경우, 아래와 같이 로그가 찍힌다.

해당 페이지를 나가면, 아래와 같이 로그가 한 줄 추가된다.

상세

ionViewWillEnter
페이지가 로드되고, active 되기 전에 호출된다.
event listener 등 뷰에 진입하는 초기에 해야 하는 작업들을 선언하기에 적합하다.

ionViewDidEnter
페이지가 active 된 직후에 호출된다.
직전의 ionViewWillEnter와 비슷하게 사용한다. 나는 ionViewDidEnter를 선호하는 편이다.

ionViewWillLeave
페이지에서 나가고, active 상태가 해제되기 직전에 호출된다.
event listener의 해제 등, 페이지를 나가는 시점에 해야 하는 작업들을 선언하기에 적합하다.

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

---

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');    
}

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

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

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가 종료된다.

---

참고
https://ionicframework.com/docs/angular/lifecycle
https://angular.io/guide/lifecycle-hooks