ionic 데이터로 작업하기 : Service 와 Nav Params

ionic앱 을 통해서 다른 페이지 혹은 컴포넌트로 데이터를 전달해야하는 상황이 생깁니다. 여러 뷰와 사용자의 상호작용으호 구성되어 단독의 페이지 혹은 뷰만 가지고는 다양한 기능을 구현할 수 없습니다. 서버의 REST API를 통해 가져온 데이터, 사용자의 입력 데이터, 혹은 클라이언트 환경에서 가져온 데이터등을 가져와서 여러곳으로 전달할 경우가 생깁니다.
이번에는 ionic 앱에서 service 및 navparams 의 파라메터 사용법을 살펴보도록 하겠습니다.

Angular Service 사용하기

Angular 2 의존성 주입 기능을 사용하여 IceCreamService를 주입가은한 형태로 만들어 보겠습니다.
첫째, 서비스의 골격은 Angular 's Injectable 선언하고 @Injectable 데코레이터를 지정하여야 합니다.

import { Injectable } from '@angular/core';

@Injectable()
export class IceCreamService {

  constructor() {}

}

위의 코드를 자동으로 생성하려면 ionic CLI에서 generate 명령어를 사용합니다. 파일은 src / providers / icecreamservice.ts 경로에 생성됩니다.

ionic generate provider icecreamservice

Angular Component 와 다른점은 export 문 위에 @Component 데코레이터 대신 @Injectable ()을 사용한다는 것뿐입니다. 이것은 Angular 컴파일러에게이 클래스가 Angular의 의존성 주입 시스템에서 사용 가능하다는 것을 알려줍니다.
다음으로 Service에 로직을 추가해 보겠습니다.

export class IceCreamService {

  hadIceCream: boolean = false;

  constructor() {}

  getIceCream() {
    this.hadIceCream = true;
    return 'mmmm... ice cream';    
  }

}

사용자가 이미 아이스크림을 먹었는지 알려주는 멤버 변수와 getIceCream () 함수가 있습니다.
다음 3가지 작업을 수행하여 component(ionic page)에서 service를 사용하도록 하겟습니다.

• import service
• componet 선언부에 서비스를 위한 provider 추가하기
• componet 생성자 추가하기

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

// import service
import { IceCreamService } from '../../providers/icecreamservice';

// the class name of the service is the provider
@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [IceCreamService]
})
export class IceCreamPage {
  // create an instance of the service
  constructor(public iceCreamService: IceCreamService, public navCtrl: NavController) {

  }
}

이제 남은 것은 service(IceCreamService)가  component(IceCreamPage)에 제공하는 데이터를 사용하는 것입니다.

export class IceCreamPage {
  message: string = "Ice cream. It's Good and You Want It.";
  constructor(public iceCreamService: IceCreamService, public navCtrl: NavController) {}

  getIceCream() {
    if (!this.iceCreamService.hadIceCream) {
      this.message = this.iceCreamService.getIceCream();
    } else {
      this.message = 'Stop hogging all the ice cream =(';
    }
  }
}

IceCreamPage에서 IceCreamService의 멤버변수에 액세스하는 방법을 주목해야 합니다.  조건절에서 hadIceCream 이 false인 경우 만 getIceCream 함수를 호출하였으며, 이런 방식을 Singleton pattern 이라고 합니다.
앱 모든 페이스에서 IceCreamService를 사용하려면, 먼전 IceCreamPage  에서 providers: [IceCreamService] 을 삭제 하고  src / app / app.moudule.ts 파일에서 ngModule 안에 providers: [IceCreamService] 지정합니다.

...
import { IceCreamService } from '../providers/icecreamservice';

@NgModule({

...

  providers: [IceCreamService]
})
export class AppModule {}

ionic Navparams 사용하기

위에서 설명한 service는 다양한 방법으로 사용될 수 있지만, 위의 IceCreamService 같이 단순것을 사용하기에는 아무래도 조금 복잡한 부분이 있습니다. Navparams 는 ionic 페이지 탐색에서 다음 page로 이용할 경우에 JSON 객체를 전달할 수 있습니다.

this.navCtrl.push (IceCreamPage)

nav 매개 변수를 사용하려면 JSON 객체를 push ()의 두 번째 파라메터로 전달해야합니다.

this.navCtrl.push (IceCreamPage, {status : true})

IceCreamPage에서 데이터를 얻으려면 Ionic의 NavParams 구성 요소를 가져옵니다.

import { NavController, NavParams } from 'ionic-angular';

그런 다음 생성자에서 인스턴스를 만들고 get (key)를 호출하여 nav params 객체에서 값을 검색합니다. 이 경우 get ( 'status')를 호출합니다.

constructor(public navCtrl: NavController, public navParams: NavParams) { 
  if (!this.navParams.get('status')) {
    this.message = 'Have some ice cream =)';
  } else {
    this.message = 'Stop hogging all the ice cream =(';
  }
}

마무리

모바일 앱 개발은 인생처럼 선택의 폭이 넓습니다.  service 와 nav params 둘다 앱 내에서 데이터를 전달하는 좋은 방법입니다. 하지만, 어떤기준을 가지고 선택하게 된다면 좀더 효율적으로 개발할 수 있습니다.  ionic에서 NavController.push () 또는 NavController.pop ()을 사용하여  page에서 다른 page로 이동할 경우에는  nav params를 선택하는 것이 좋습니다. 가볍고 구현하기 쉽습니다. 개념적으로 데이터가 흐르는 방식으로 구현하여 매우 쉽게 추론할 수 도 있습니다.
다음으로 고려해야 할 사항은 지속성입니다. 데이터가 앱내에서 지속적으로 필요하다면, 혹은 여러 뷰에서 이동없이 사용해야 된다면, 이러한 경우에는 service가 좀더 적합합니다. 서비스는 모든 구성 요소에 주입 할 수있는 공유 인스턴스를 작성하므로 불변성 및 / 또는 일관성을 보장 할 수 있습니다. 즉, 모든 구성 요소가 동일한 데이터 소스를 사용하므로 데이터가 사용되는 모든 곳에서 데이터가 동일하게된다는 것을 쉽게 확인할 수 있습니다. 끝.

※ 이 페이지는 https://blog.ionicframework.com/working-with-data-services-vs-nav-params/ 내용을 참고하여 작성하였습니다.