앵귤러 문서 까기 @NgModule

앵귤러 API 문서를 보면서 궁금했던 것들을 하나씩 까보려고 한다. 현재 프로젝트에서 쓰고 있는 앵귤러 5 버전을 기준으로 기록한다.

@NgModule

NgModule이란 기능 모듈 단위로 코드를 관리하는 것을 말한다. 기능이 연관된 구성요소(컴포넌트, 디렉티브, 파이프 등)를 하나로 묶어 관리하는 단위이다.

아래처럼 @NgModule 데코레이터로 선언하여 메타데이터를 입력한다. 앵귤러 애플리케이션은 최상위 모듈인 AppModule에서 시작된다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  // 메타데이터 선언
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

메타데이터

• declarations : 이 모듈에 포함되는 컴포넌트, 디렉티브, 파이프를 등록한다. 최초에는 AppComponent 컴포넌트 하나밖에 없다. AppModule는 최상위 모듈이므로 보통 AppComponent 하나만 선언해둔다.
• imports : 이 모듈에서 필요한 기능을 다른 모듈에서 로드할 때 사용한다. 기능 모듈의 컴포넌트, 디렉티브, 파이프를 등록한다. 불러온 모듈 안에서 컴포넌트, 디렉티브, 파이프가 export 키워드로 지정되어 있다면 imports 배열을 지정한 현재 모듈안에서 자유롭게 사용할 수 있다. 
• providers : 앱에서 사용하는 서비스를 등록한다. 서비스 프로바이더를 등록하면 하위 모듈에서 모두 이 서비스를 의존성으로 주입받을 수 있다.
• bootstrap : index.html 페이지에 생성되고 실행될 최상위 컴포넌트를 지정한다. bootstrap 배열에 등록된 컴포넌트는 부트스트랩 단계에서 바로 생성되어 브라우저 DOM에 추가된다.

다시 살펴보자면 @NgModule는 아래와 같은 역할을 정할 수 있다.

• 해당 모듈에 속한 컴포넌트, 디렉티브, 파이프가 어떤 것인지 정의
• 해당 모듈에 속한 컴포넌트, 디렉티브, 파이프 중 모듈 외부로 공개할 요소를 지정하여 다른 모듈의 컴포넌트 템플릿에서 이 구성요소를 사용할 수 있음
• 해당 모듈에 필요한 다른 모듈의 컴포넌트, 디렉티브, 파이프를 로드함
• 컴포넌트에 사용할 서비스 프로바이더를 등록함

자주 사용하는 NgModule

• BrowserModule : 브라우저에서 애플리케이션을 실행할 때
• CommonModule : ngIf, ngFor를 사용할 때
• FormsModule : 템플릿 기반 폼을 사용할 때(NgModel 포함)
• ReactiveFormsModule : 반응형 폼을 사용할 때
• RouterModule : RouterLink, forRoot(), forChild()를 사용할 때
• HttpClientModule : 서버와 HTTP 통신을 해야 할 때
• 그 외 NgModule 형태로 제공되는 서드파티 라이브러리 : Material Design, Ionic, AngularFire2 등

앵귤러는 최소 1개 이상의 Module이 존재하는 셈

모든 Angular 앱은 반드시 최상위 모듈이 존재하며, 따라서 최소 1개 이상의 모듈을 갖는다고 할 수 있다. 애플리케이션은 이 최상위 모듈을 부트스트랩하면서 시작된다.

최상위 모듈 AppModule에는 애플리케이션 실행에 필요한 컴포넌트만 간단하게 정의한다. 앱이 점점 커지면서 최상위 모듈은 담당하는 기능에 따라 여러 개의 기능 모듈로 나뉘어진다. 결국 최상위 모듈은 직접 컴포넌트를 로드하는 대신, 다른 모듈을 로드하는 방식으로 수정된다.

주의사항

컴포넌트는 반드시 NgModule 한 곳에만 꼭 등록해야 한다. 반드시 @NgModule 하나에만 선언되어야 한다.