Ionic Life cycle (아이오닉 앵귤러 생명주기) 정리

Ionic life cycle를 참고하였습니다.

이번 프로젝트에서 Ionic & Angular로 구축된 모바일 프로젝트를 진행 중이다. 개발을 하다보니 Page life cycle(페이지 생명주기)가 어떤 순서로 작동하는지 알아둘 필요가 있어서 간단하게 정리해본다.

Ionic 페이지 생명 주기

Ionic 페이지 생명 주기는 아래 순서대로 이벤트가 발생한다. Ionic에서는 angular의 생명주기 이벤트도 수용하고 있기 때문에, angular 로 구현되어 있다면 angular의 lifecycle도 같이 고려해 보아야 한다.

1. ngOnInit
2. ionViewWillEnter
3. ionViewDidEnter
4. ionViewWillLeave
5. ionViewDidLeave
6. ngOnDestroy 

 

이게 뭔 순서인가 싶지만, 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 상태가 해제된 직후에 호출된다.

Ionic & Angular 생명주기 예시

아래는 ionic docs에서 제공하는 Ionic & Angular lifeCycle 예시이다. 2개의 페이지를 왔다갔다 이동하면서 Ionic 생명주기의 순서를 확인할 수 있다. 

page 1 페이지 진입시 생명주기

• page 1 ngOnInit                      // 최초 1번만 실행
• page 1 ionViewWillEnter       // page 1 진입 예정
• page 1 ionViewDidEnter        // page 1 진입

page 1 -> page 2 버튼 클릭시 생명주기

• page 2 ngOnInit                     // 최초 1번만 실행
• page 1 ionViewWillLeave
• page 2 ionViewWillEnter       // page 2 진입 예정
• page 2 ionViewDidEnter       // page 2 진입
• page 1 ionViewDidLeave

page 2 -> page 1 버튼 클릭시 생명주기

• page 2 ionViewDidLeave
• page 1 ionViewWillEnter        // page 1 진입 예정
• page 1 ionViewDidEnter         // page 1 진입
• page 2 ionViewDidLeave
• page 2 ngOnDestroy

페이지 진입 시에는 angular가 먼저 시작된 후 ionic이 실행되며, 페이지를 나갈 때에는 ionic이 먼저 종료된 이후, angular가 종료된다. 스택처럼 쌓이는 방식이라고 보면 될 것 같다.

위에서 다룬 lifeCycle 이벤트 말고 다양한 생명주기 이벤트들이 있다. 자세한 가이드는 ionic docs에서 참고하자.