NgModule이란 무엇인가요?

Question

NgModule이란 무엇인가요?

Accepted Answer

**NgModule**은 `@NgModule`로 장식된 클래스로, 관련된 컴포넌트, directive, pipe, 서비스를 하나의 응집된 블록으로 묶어 Angular에게 이들을 어떻게 컴파일하고 연결할지 알려줍니다. (참고: 최신 Angular는 점점 NgModule보다 **standalone 컴포넌트**를 선호하지만, 대부분의 기존 코드베이스에서는 NgModule을 이해하는 것이 여전히 필수적입니다.)

## NgModule의 구조

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // 이 모듈이 소유한 컴포넌트/directive/pipe
  imports: [CommonModule, FormsModule],                 // 필요한 export를 가진 다른 모듈
  exports: [UserListComponent],                          // import하는 쪽에 제공하는 것
  providers: [UserService],                              // 이 모듈이 제공하는 서비스 (DI)
})
export class UsersModule {}
```

## 네 가지 핵심 배열

```text
declarations → 이 모듈에 속하는 컴포넌트, directive, pipe
imports      → 이 모듈이 필요로 하는, export된 기능을 가진 다른 NgModule
exports      → import하는 쪽에 제공되는 declarations/모듈의 일부
providers    → dependency injection을 위해 등록된 서비스
```

컴포넌트는 **하나의** 모듈에서만 선언될 수 있으며, 그 모듈의 템플릿에서 사용되려면 선언되어야(또는 standalone으로 import되어야) 합니다.

## 루트 모듈

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // 실행할 루트 컴포넌트
})
export class AppModule {}
```

모든 (standalone이 아닌) 앱에는 시작 컴포넌트를 지정하는 `bootstrap` 배열을 가진 루트 `AppModule`이 있습니다.

## 기능 모듈과 구성

```text
AppModule (루트) → imports → UsersModule, AdminModule, SharedModule
```

앱은 **기능 모듈**(도메인 영역별로 하나씩)과 **공유 모듈**(공통 컴포넌트/pipe)로 구성되어, 코드베이스를 모듈화하고 기능별 lazy loading을 가능하게 합니다.

## standalone으로의 전환

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // NgModule 불필요
```

최신 Angular는 컴포넌트가 **standalone**이 될 수 있게 하여, 자신의 의존성을 직접 선언함으로써 NgModule 보일러플레이트를 줄이거나 없앱니다.

## 왜 중요한가

NgModule은 Angular의 전통적인 구성 및 의존성 연결 메커니즘입니다. `declarations`/`imports`/`exports`/`providers`를 이해하는 것은 대다수 기존 Angular 앱을 탐색하고 lazy loading을 파악하는 데 필요합니다.

새 코드는 standalone 컴포넌트 쪽으로 향하고 있지만, 실무 Angular 작업에서는 NgModule 지식이 여전히 필수적입니다.