Angular는 모듈 기반의 프레임워크로, 컴포넌트 기반의 아키텍처를 가지고 있습니다. 컴포넌트는 앵귤러 어플리케이션의 구성요소로, 사용자 인터페이스를 만들고 관리하는 역할을 합니다. 이번에는 Angular 애플리케이션에서 컴포넌트를 만들고 사용하는 방법을 살펴보겠습니다.

컴포넌트 생성하기

먼저, Angular CLI를 사용하여 새로운 컴포넌트를 생성할 수 있습니다. 아래 명령어를 통해 “my-component”라는 이름의 새로운 컴포넌트를 생성할 수 있습니다.

ng generate component my-component

이 명령어를 실행하면 Angular CLI가 새로운 폴더를 생성하고, 필요한 파일들을 자동으로 생성해줍니다.

컴포넌트 구성요소

새로 생성된 컴포넌트 폴더에는 다음과 같은 파일들이 포함되어 있을 것입니다.

• my-component.component.ts: 컴포넌트의 TypeScript 코드
• my-component.component.html: 컴포넌트의 HTML 템플릿
• my-component.component.css: 컴포넌트의 CSS 스타일시트
• my-component.component.spec.ts: 컴포넌트의 유닛 테스트 스펙 파일

컴포넌트 사용하기

생성된 컴포넌트를 사용하기 위해서는 해당 컴포넌트를 다른 모듈이나 컴포넌트에서 import 해주어야 합니다. 예를 들어, app.module.ts 파일에서 다음과 같이 컴포넌트를 import 하고 등록할 수 있습니다.

import { MyComponentComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    MyComponentComponent
  ],
  // ...
})
export class AppModule { }

그리고 이 컴포넌트를 원하는 곳에서 해당 태그를 사용하여 화면에 표시할 수 있습니다.

<app-my-component></app-my-component>

결론

Angular에서 컴포넌트를 만들고 사용하는 방법에 대해 간략히 살펴보았습니다. 새로운 컴포넌트를 생성하고 기존 컴포넌트를 사용하는 것은 Angular 어플리케이션의 구성 및 유지보수에 있어 중요한 부분이므로, 실무에서 다양한 컴포넌트를 활용하여 어플리케이션을 구축해보시길 권장합니다.

더 많은 정보는 Angular 공식 문서에서 확인하실 수 있습니다.