Angular - 모듈과 컴포넌트

김명식·2023년 9월 25일
0

Angular

목록 보기
3/3
post-thumbnail

Mudule & Component

앵귤러는 모듈 - 컴포넌트만 익히면 끝난다는 말이 있을 정도로 중요하다고 한다.
(구글 & 책 & GPT가 ㅎ)

  • 모듈
    모듈은 애플리케이션의 부분적인 기능을 정의하고 관련된
    컴포넌트, 서비스, 디렉티드 등을 그룹화한다.
    여기에는 @NgModule 데코레이터를 사용하여
    모듈을 정의하는 코드가 포함된다.
// app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

위의 코드에서 AppModule은 애플리케이션의 주요 모듈로 ,
"declarations" 배열에는 이 모듈에서 사용되는 컴포넌트('AppComponent')를 등록한다.
"imports" 배열에는 다른 모듈을 가져오는데 사용된다.
"bootstrap" 배열에는 애플리케이션의 시작 컴포넌트를 지정한다.



  • 컴포넌트
    컴포넌트는 사용자 인터페이스를 구성하고 해당 부분의 동작을 제어하는 역할을 수행한다.
    각 컴포넌트는 TypeScript 클래스로 정의되며, @Component 데코레이터를 사용하여
    메타데이터를 추가한다.
// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

위의 코드에서 AppComponent는 애플리케이션의 주요 컴포넌트로 ,
HTML 템플릿과 컴포넌트 클래스가 정의되어 있다.
이 컴포넌트 클래스는 "title" 속성을 가지고 있으며, 이 속성은 템플릿에서 사용된다.



요약하자면,
모듈 은 애플리케이션의 기능을 그룹화하고 구성
컴포넌트 는 사용자 인터페이스를 저의하고 해당 동작을 제어

profile
BackEnd & AWS Developer

0개의 댓글