[Angular2] 구성요소

Angular 웹 애플리케이션을 구성하는 구성요소는 크게 4가지로 구분됩니다.

 

컴포넌트(component)

Angular2의 구성요소중 가장 핵심이 되는 구성요소입니다. 이 컴포넌트 중심으로 개발이 이루어지며 컴포넌트는 크게 지시자, 템플릿, 클래스로 나뉩니다

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

@Component({
  selector: 'my-component',
  template: '{{msg}}'
})
export class MyComponent {
  msg: string = "hello";
}

위의 코드를 보면서 한번 살펴봅시다

 

먼저 컴포넌트를 정의할때는 @Component 장식자를 이용해 정의합니다

 

selector 속성에는 컴포넌트의 지시자가 있고

 

template 속성에는 템플릿 UI가 위치합니다

 

class 에서는 컴포넌트에서 사용할 로직이 위치하며 이때 클래스와 템플릿은 바인딩을 통해 값을 주고 받습니다

 

-컴포넌트는 독립적으로 동작하지 않고 이어서 다룰 모듈이나 서비스, 지시자와 함께 동작합니다-

 

모듈(module)

Angular는 많은 모듈로 구성된 모듈 집합입니다

 

모듈에서는 두가지로 또 나뉘어 지는데 하나는 Angular 라이브러리 모듈과 사용자가 정의하는 모듈이 있습니다

 

먼저 모듈을 정의 하려면 export 키워드를 이용해 모듈을 정의하고 모듈을 외부로 노출할 것을 알려줍니다.

export class Hello{}

이렇게 정의하고 컴포넌트에서는

import { Hello } from './hello';

이렇게 사용합니다

 

모듈은컴포넌트, 지시자, 파이프와 같은 구성 모듈을 통합적으로 관리할 수 있게 합니다. 통합적으로 관리한다는건 코드가 길어질 경우 체계적이지 않고 복잡해질 확률이 높다는것을 의미합니다

 

그래서 장식자를 이용하여 정의해서 사용합니다

@NgModule({
  imports: [
    Angular모듈, routing 모듈 등
  ],
  declarations: [
    컴포넌트, 지시자, 파이프 등
  ],
  providers: [
    서비스 모듈 등
  ],
})
export class MyModule {}

 

서비스(service)

서비스는 재사용 가능한 로직을 정의하기 위한 용도로 컴포넌트 외부에 정의합니다

컴포넌트에 제공할 목적으로 외부에 정의한 클래스 입니다

 

지시자(directive)

Angular는 선언형 프로그래밍을 권장합니다

 

지시자는 컴포넌트의 템플릿에서 엘리먼트의 속성과 같이 구성요소의 속성이나 이름으로 표현합니다

 

예를들어 helloStyle이라는 지시자를 만든다면 템플릿에 다음과 같이 표현하면 좋습니다

@Component({
  selector: 'my-component',
  template: '<div helloStyle></div>'
})

지시자를 이용하면 UI로직 코드를 반복적으로 사용할 필요가 없습니다 이유는 템플릿 출력과 관련된 기능을 지시자를 통해 로직을 분리할 수 있기 때문이죠

 

지시자는 화면 출력시 필요한 기능을 외부 모듈로 분리해 정의합니다