앵귤러의 모듈과 컴포넌트

앵귤러를 사용해서 개발하던 중.. 모듈과 컴포넌트의 정확한 차이가 뭔지 궁금해져서 찾아보았다. https://medium.com/swlh/angular-component-vs-module-b8c7347c604e

Module

모든 앵귤러 어플리케이션은 AppModule이라 부르는 root 모듈을 가진다. AppModule 은 어플리케이션을 시작하는 메커니즘을 제공한다.

NgModule 은 여러 유용한 기능을 제공한다.

1. 다른 NgModule들의 기능들을 import 할 수 있다.
2. 현재 모듈의 기능들을 export 하여 다른 NgModule 들에서 사용할 수 있게 해준다.

즉, NgModule들은 앵귤러 어플리케이션에서 공유 가능한, 독립적인 유닛으로 동작한다.

모듈에는 여러 타입이 존재한다.

1. 시스템 모듈 (라우터 등)
2. 커스텀 모듈
3. 서드 파티 모듈 (ngrx, rxjs 등)

앵귤러의 모듈들은 모듈이 정말 필요한 시점에 lazy load 될 수 있고, lazy loading은 앵귤러 어플리케이션의 성능을 향상하는데 중요한 역할을 수행한다.

Component

컴포넌트는 view라고 부르는 화면의 일부분을 조작한다.

Component는 앵귤러 어플리케이션의 UI 조각을 구성하는 가장 기본적인 블럭이다. @Component 데코레이터와 템플릿을 통해 제공된다.

• 컴포넌트 데코레이터는 앵귤러 컴포넌트로써 클래스를 표시하고
• 어떻게 컴포넌트가 처리, 인스턴스화되고, 런타임에 사용될 지에 대한 추가적인 메타 데이터를 제공한다.

Module vs Component

모듈은 컴포넌트 + 디렉티브 + 서비스 + 파이프 + 헬퍼의 컬렉션이다.

• 각각의 컴포넌트는 동일 모듈 내의 다른 컴포넌트를 사용할 수 있다.
• 다른 모듈에서 선언된 컴포넌트를 사용하기 위해서는 불러올 컴포넌트가 속한 모듈에서 컴포넌트를 export 해줘야 한다.
• 여러 모듈이 모여 어플리케이션을 구성하게 된다.