[Angular] [02]Module

본 글은 앵귤러 공식 홈페이지(http://angular.io)의 DOC 항목을 한국어로 (공부 목적으로) 요약(?)정리(?)한 글임을 밝힙니다.

---

NgModule 메타데이터

NgModule는 @NgModule()로 수식되어진 클래스로 정의된다. @NgModules 데코레이터는 프로퍼티가 모듈을 설명하는 하나의 메타데이터 객체를 입력받는 함수이다. 이 메타데이터 객체의 중요한 프로퍼티에는 다음과 같은 것들이 있다

다음은 최상위 NgModule의 예시입니다.

• declarations: 현 NgModule에 속하는 컴포넌트, 디렉티브, pipe
• exports : 다른 NgModule의 템플릿에서 보여질 수 있으며 사용가능한 정의들의 부분집합
  (쉽게 말해 현 모듈의 기능을 다른 모듈이 사용할 수 있도록 내보내는 것)
• imports : 현 NgModule에 정의된 컴포넌트 템플릿이 참조하는 클래스를 export하는 다른 모듈들
• providers: 현 NgModule이 영향을 미치는 서비스들의 생성자(프로바이더). NgModules에서 정의하고 사용되는 서비스들은 애플리케이션 전역에서 접근 가능해집니다. 그렇기에 컴포넌트 레벨에서 providers를 지정하는 것이 대게 선호됩니다.
• bootstrap: 다른 모든 애플리케이션 뷰를 호출하는 최상위(root) 컴포넌트를 지정합니다. 그렇기에 bootstrap 프로퍼티는 최상위 NgModule만이 가질 수 있습니다.

//src/app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  //최상위 NgModule은 굳이 exports를 할 필요 없습니다.
  // (다른 NgModule에서 참조 할 일이 없기 때문)
  //여기서는 exports의 사용법을 보여주기 위하여 추가했습니다.
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

NgModules과 컴포넌트

NgModules은 컴포넌트들에게 컴파일 컨텍스트릴 제공합니다. 최상위 NgModule은 항상 부트스트랩시 생성되는 하나의 컴포넌트만을 가지지만, 다른 NgModule은 라우터를 통해 로드되거나 템플릿을 통해 생성되는 다수의 컴포넌트를 가질 수 있습니다. 특정 NgModule에 속하는 컴포넌트들은 동일한 컴파일 컨텍스트를 가집니다.

NgModule 내 커포넌트는 동일 컴파일 컨텍스트를 가집니다.

컴포넌트와 이 컴포넌트의 템플릿은 함께 뷰를 정의합니다. 컴포넌트는 또한 뷰 계층을 구성할 수 있는데, 이 뷰 계층은 유닛으로써 생성, 수정, 삭제될 수 있는 복잡한 스크린의 일부를 정의합니다. 뷰 계층은 각자 다른 NgModules에 속하는 컴포넌트에 정의된 뷰들을 혼합할 수 있습니다. 이러한 현상은 흔한 관례이며, 특히 UI 라이브러리에서 자주 행해집니다.

다양한 모듈에 속한 컴포넌트 내의 뷰를 Host View(CompA) 안에서 혼합할 수 있습니다.

컴포넌트를 생성하면 "호스트 뷰(host view)"라는 단일 뷰에 연결됩니다. 호스트 뷰는 뷰 계층의 최상위 뷰라고 할 수 있는데, 이 호스트 뷰는 다른 하위 컴포넌트들의 호스튜 뷰가 될 수 있는 "종속 뷰(embedded view)"를 포함 할 수도 있습니다. 이 컴포넌트들은 동일 NgModule내에 존재해도 되며, 다른 NgModules로부터 참조되어도 됩니다. 트리 내의 뷰는 어떠한 깊이(depth)로도 중첩될 수 있습니다.

뷰의 계층적 구조는 앵귤러가 DOM과 앱 데이터의 변화를 감지하고 반응할 때 단위로 사용되며 핵심적인 역할을 합니다.

NgModules과 컴포넌트

NgModule 시스템은 자바스크립트 오브젝트 collection을 관리하는 ES2015 모듈 시스템과 다릅니다. 이 두 모듈 시스템은 상호보완적이며 앱을 개발할 때 함께 사용됩니다.

JavaScript에서 각 파일은 모듈이며, 파일 내의 모든 객체는 모듈에 속하게 됩니다. 모듈을 export 키워드를 통해 객체들을 public으로 정의(타 모듈에서 사용 가능)합니다. 다른 JavaScript 모듈은 타 모듈의 public 객체를 import 구문을 통해 접근하고 사용할 수 있습니다.

//JavaScript의 import 구분
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule { }

Angular 라이브러리

앵귤러 라이브러리 모듈의 간략한 구조

앵귤러는 여러 JavaScript 모듈의 묶음 형식으로 로드되며, 라이브러리 모듈의 묶음과 같다고 생각할 수 있습니다. 각 앵귤러 라이브러리는 @angular 접두사로 명명됩니다. npm(node package manager)을 통해 설치할 수 있으며 JavaScript import 구문을 통해 이 앵귤러 프레임워크의 일부를 사용할 수 있습니다.

예를 들어, @angular/core 라이브러리 내의 Component 데코레이터는 다음과 같이 참조하여 사용할 수 있습니다.

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

JavaScript import 구문을 사용하여 앵귤러 라이브러리로부터 NgModules을 참조할 수도 있습니다. 예를 들어, 아래의 코드는 앵귤러 platform-browser 내의 BrowserModule NgModule을 참조하도록 해줍니다.

import { BrowserModule } from '@angular/platform-browser';

상단의 최상위 모듈 예시에서 애플리케이션 모듈은 BrowserModule 내의 객체들을 필요로합니다. 이 객체들에 접근하기 위해서 @NgModule 메타데이터 내의 imports 구문에 BrowserMoulde을 추가해줘야 합니다.

imports:      [ BrowserModule ],

이 방식에서 앵귤러(import, exports)와 JavaScript(컴포넌트 메타데이터(@)내의 imports)의 모듈 시스템을 함께 사용합니다. 이 두 방식은 "imports"와 "exports"라는 공통의 단어를 함께 사용하기에 혼동하기 쉽지만, 앵귤러를 사용하는 과정에서 익숙해질 수 있을 것입니다.