Component 만들기

Component란

컴포넌트는 애플리케이션의 핵심 구성 요소로, 컴포넌트 중심으로 개발합니다.
컴포넌트는 독립적인 뷰를 소유하며, 다른 컴포넌트에 간섭을 받지 않습니다.
angular는 컴포넌트의 집합이다. 컴포넌트가 모여서 하나의 모듈이 생성된다.
자주사용하는 특정 부분들을 컴포넌트로 제작해두면 재사용이 가능하다. 기존 프로그램에서 include기능과 유사하게 사용할 수 있다.

Component 만드는 방법

아래 예제는 footer라는 component를 만드는 방식 및 적용하는 방식에 대해 간략하게 설명드립니다.

컴포넌트 만들기

• footer.ts

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

@Component({
    selector: 'app-footer', // 이 부분은 다른 page에서  <app-footer></app-footer> 처럼 넣기만하면 아래 templat의 내용이 출력됩니다.
    template: `
    <div>..........</div>
    `
})

export class FooterComponent {
    constructor() { 
    }
}

@NgModule({
    declarations: [ FooterComponent ], 
    // 제작된 component는 반드시 한번의 declarations(선언)을 거쳐야 하면 두번 이상 선언할 경우 에러가 발생합니다.
    // 다른 모듈에서 한번만 사용할 경우 특정 모듈에서 declarations 하면 되지만 
    // 여러 모듈에서 사용할 경우 이곳에서 declarations 하고 각기 다른 모듈에서는 현재 정의된 모듈을 import 하면 에러가 발생하지 않습니다.
    imports: [
      ..........
    ],
    exports: [ FooterComponent ]
})
export class FooterModule {}

컴포넌트 호출 및 적용

import { FooterModule } from './common/footer';

@Component({
  selector: 'app-root',
  template: `
    <app-footer></app-footer> // 이렇게 처리하면 위의 내용이 출력됩니다.
    `
})
..........
@NgModule({
  ..........
  imports: [
    ..........
    FooterModule,
  ]
})

@Component({
  selector: 'app-mycomponent',
})

위와 같이 정의하고 module에서 declarations 하면 모듈의 하위 컴포넌트에서 아래와 같이 사용할 수 있다.

<app-mycomponent></app-mycomponent>