[Angular] 모듈 (NgModule)

■ 정의

NgModule은 컴포넌트와 디렉티브, 파이프 등 기능이 연관된 구성요소를 하나로 묶어 관리하는 단위이며, 기능의 측면이나 애플리케이션 비즈니스 도메인, 업무 흐름, 공통 유틸 등 해당 모듈이 담당하는 부분에만 집중하도록 구성한다. (공식문서)

 

■ 모듈의 활용성

리액트의 경우 Atomic 디자인 패턴이 유명하다. 최소한의 단위로 컴포넌트를 쪼개어 부품처럼 사용해 새로운 컴포넌트를 만들어낸다. 하지만 a컴포넌트와 b컴포넌트를 조합해 c컴포넌트를 만든다고 했을때 c컴포넌트가 무엇이 어떻게 구성되어있는지 파악하기 어려울 수 있을 것 같다. c컴포넌트에서 a, b컴포넌트의 import 경로(path)와 파일명으로 유추해볼 수 있을 것이다. 더 나아가 a, b컴포넌트의 위치로 이동해 자세히 볼 수도 있을 것이다.

앵귤러는 조금 다르다. NgModule에서 제공하는 프로퍼티에 view를 담당하거나 비즈니스 로직을 담고있는 컴포넌트와 모듈들을 각각 넣어줌으로써 c컴포넌트가 어떠한 역할을 하는지 유추할 수 있을 것 같다. 부품들을 한 곳에 모아 조립해주는 조립자의 역할을 한다. NgModule의 대표적인 프로퍼티는 다음과 같다.

 

declarations : 컴포넌트

imports : 컴포넌트, 모듈, 디렉티브, 파이프

exports : 컴포넌트, 모듈, 디렉티브, 파이프

providers : -

bootstrap : 컴포넌트

 

위 속성에 각각의 부품들을 정리하여 c컴포넌트가 어떻게 구성되어 있는지 한 눈에 볼 수 있다. 아래와 같이 조합자의 성격에 따라 컴포넌트를 조합해 모듈을 만들 수 있을 것이다.

NgModule은 묶는 것에만 목적을 두지않고, export 프로퍼티를 통해 외부와 공유할 수도 있다. (공식문서)

 

목적/성격에 따라 컴포넌트를 묶어 모듈로 만들어보자