ionic2 페이지 이동

ionic2 페이지 생성 부분에서 페이지 이동에 대해 간략하게 방법만 말하긴 했는데, 이번에는 조금 더 길게 설명해봅니다.

예제는 저번과 동일한 tutorial파일로 진행되며 list와 item-details를 이용하여 설명이 진행됩니다.

itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
}

지난번에 봤던 ListPage 클래스에 있는 메서드(함수?)이다. 뒤에 있는 ItemDetailPage를 사용하기 위해서는 해당 클래스를 import해야 합니다.

(당연하게도 이 예제는 우리가 만지기 전부터 실행이 가능한 예제였으므로 미리 import되어 있습니다. 하지만 지우고 import해보세요)

...
import { ItemDetailsPage } from '../pages/item-details/item-details';

이렇게 import [ 클래스명 ] form '경로'의 형태로 import를 하면 ListPage 클래스에서 ItemDetailPage 클래스를 사용할 수 있게 됩니다.

만약 지우고 다시 import했다면 저장해봅시다. 저장하면 아이오닉2는 ts파일을 재컴파일하게 되는데, 이 과정 때문에 브라우저도 새로고침(reload)이 됩니다. SPA(Single Page Application)임을 실감하고 싶다면 My First List같은 페이지에서 재컴파일을 시키면 됩니다. (아마 root-page를 보게 될 것입니다)

이 프로세스가 진행되는 이유에 대해 알아봅시다.

아이오닉에서의 페이지관리(navigation)은 간단한 스택 구조와도 같은데, push()를 통해 스택의 상단에 페이지를 올리면 '뒤로 가기'가 생김과 동시에 해당 페이지로 포워딩(이동)됩니다. 뒤로 가기를 누를 경우 상단에 있는 페이지는 pop()됩니다. (pop은 딱히 설정하는 것이 아닙니다) this.navCtrl을 생성자에서 설정함으로써, this.navCtrl.push()를 통해 원하는 페이지로 이동할 수 있게 되었습니다. 이런 식으로 가고 싶은 페이지에 데이터들을 같이 싣어 보낼 수도 있습니다. (ionic2 페이지 생성에서 말한 icon, title같은 데이터들)

'push()를 쓰면 된다', '간단한 스택 구조다'라고 말했지만 이 방법 말고도 다양한 방법들이 있습니다. 왜냐하면 페이지관리자(Navigation System)가 꽤 유연한 구조를 가졌기 때문입니다.