01.1. Ionic App Component

Component

W3C 표준인 웹 컴포넌트 기술을 기반으로 HTML, CS, JS를 하나의 단위로 묶어주는 기술로, 앱을 구성하는 요소나 로직을 말함.

Decorator

Decorator는 주로 클래스, 서비스, 타입, 멤버변수 등을 ‘장식’하는 역할.

• 클래스 앞에 @Component를 해주면 그 클래스는 컴포넌트가 됌.
• 변수 앞에 @Input 를 해주면 외부로 부터 값을 받음
• 변수 앞에 @output를 해주면 외부로 값을 보냄.

Decorator는 Typescript의 실험적인 구문으로, tsconfig.json의 experimentalDecorators" : true를 설정하면 사용할 수 있음(ionic-cli 자동셋팅)

Ionic2에서는 Typescript의 일부 Decorator만 사용 가능, 앵귤러와도 약간 다름.

ex) 앵귤러의 decorations 등을 아이오닉에서는 사용 불가

Ionic의 컴포넌트

@Component 데코레이터로 장식된 클래스를 컴포넌트라고 통칭함.

메타데이터

메타에디터 : @Component 에는 하나의 객체 파라미터를 전달할 수 있음 이를 메타데이터라고 함.

1
2
3
4

@Component({
  selector: ... // 컴포넌트를 어디에 표시할지
  template: ... // 컴포넌트 내용을 담는 곳
})

• app.component.ts

앱이 최초 실행되는 위치이다.

1
2
3
4
5
6
7
8
9
10

import { Component } from '@angular/core';
import { HomePage } from '../pages/home/home';

@Component({
  template: '<ion-nav #content [root]="rootPage"></ion-nav>'
})
export class AppComponent {
  rootPage: any = TabsPage;
  ...
}

@Component의 메타데이터에, selector가 없는 대신 디폴트로 ion-app이 사용된다.

[root] 는 DOM 속성으로, 어떤 페이지가 RootPage 인지 표시.

#은 참조변수의 의미이다. 참조변수가 #content이라고 선언돼 있을때 root 페이지를 참조하려면 과 같이 접근한다.

• home.ts

앱 컴포넌트에서 참조한 HomePage

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})


export class HomePage {
	constructor(public navCtrl: NavController) {
      console.log("시작!")
	}
}

• app.module.ts

어떤 페이지, 서비스를 사용하는지, 어떤 컴포넌트가 루트 컴포넌트인지.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

...
@NgModule({
  declarations: [
    MyApp,
    HomePage,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ...
  ],
  providers: [
    ...
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

@NgModule을 통해 AppModule을 장식

1. declarations : 사용할 컴포넌트들 등록

2. imports: [ IonicModule.forRoot(MyApp) ] : 루트 컴포넌트 등록(MyApp)

3. entryComponents : 페이지 컴포넌트를 등록.

Reference

https://www.youtube.com/watch?v=zp3goVaR8Vg&list=PLAiXlfcSCXYTA8k8AQX0sdRtvpOGkY7yq&index=9

Comment and share