앵귤러 콤포넌트

앵귤러 애플리케이션은 컴포넌트라는 조각으로 만들어집니다. 컴포넌트는 기본적으로 HTML 템플릿, CSS, TypeScript class 파일로 구성되는데요. TypeScript는 JavaScript의 진화된 버전으로 애플리케이션의 기능 (행동)을 담당합니다.

 

사용방법

컴포넌트는 수동으로 만들거나 앵귤러 CLI를 사용해서 만들 수 있는데요. 수동으로 만드는 경우 파일생성부터 각 파일 구성 및 모듈에 등록하는 작업을 수동으로 해 주어야 하기 때문에 앵귤러 CLI 사용을 권장합니다.

 

그럼, 앵귤러 CLI를 사용하여 컴포넌트를 생성하는 방법을 보겠습니다. 앵귤러 프로젝트 생성 후 커멘드 라인에서 아래 커멘드를 입력합니다.

ng generate component <component-name>
ng g c <component-name> // 단축키

위와 같이 컴포넌트 생성시 .spec이라는 테스트 파일 (Unit test 파일)도 같이 생성되는데요.  아래와 같이 옵션을 추가하여 해당 테스트 파일을 제외하고 컴포넌트를 생생하는 것도 가능합니다.

ng g c <component-name> --skip-tests=true // .spec 테스트 파일제외 옵션

컴포넌트는 기본적으로 /src/app/ 아래 생성됩니다. 프로젝트 규모가 커지면서 가독성도 떨어지기 때문에 정리를 위해 components라는 폴더를 추가하여 해당 폴더 안에 컴포넌트를 생성하는 것이 통용됩니다. 참고로 프로젝트 이름 앞에 오는 경로는 모두 폴더로 생성되기 때문에 컴포넌트 내에 각각의 컴포넌트들을 분류해서 저장하는 것도 가능합니다.

ng g c components/<component-name> --skip-tests=true // 폴더 지정하기

 

생성된 파일들

.component.ts

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

@Component({ // Meta tag -> 컴포넌트 정의
  selector: 'app-join', // 템플릿 CSS selector (필수) -> 브라우저에 해당 selector가 나타날 때 클레스 실체화
  templateUrl: './join.component.html', // 연결할 템플릿 (필수)
  styleUrls: ['./join.component.css'], // 스타일 (옵션)
})
export class JoinComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {} 
}

@Component 매개변수 세부설명

selector는 컴포넌트 템플릿에 지정되어 브라우저에 표시되는 태그이름인데요. 해당 태그가 브라우저에 나타날 때마다 앵귤러는 해당 컴포넌트 클래스를 실체화 (instantiate) 합니다.

template은 해당 컴포넌트를 화면에 표시하는 파일인데, 대부분의 경우 위와 같이 'templateUrl' 키로 경로로 지정하여 사용하지만 아래와 같이 'template'을 사용하여 직접 태그를 삽입하는 것도 가능합니다 (단, 두 가지를 같이 사용하는 것은 불가능합니다). 

@Component({
  selector: 'app-join',
  template: '<h1>Hi World!</h1>',
})

'template'을 사용 시 주의할 점은 한 줄이 넘어 갈경우 따옴표( ' ) 대신 backticks ( ` ) 기호를 사용해야 합니다 (일반적인 자판에서 숫자 1 왼쪽에 위치한 기호).

@Component({
  selector: 'app-join',
  template: `
    <h1>Hi World!</h1>
    <p>multiple lines</p>
  `
})

style도 템플릿처럼 경로 또는 직접삽입을 구현가능합니다.

@Component({
  selector: 'app-join',
  template: '<h1>Hi World!</h1>',
  styleUrls: ['./join.component.css']
})

@Component({
  selector: 'app-join',
  template: '<h1>Hi World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

보이는 것처럼 스타일은 배열 (array) 형태로 추가되기 때문에 복수의 스타일 파일을 추가하는 것도 가능합니다.

 

.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { JoinComponent } from './join.component';

describe('JoinComponent', () => {
  let component: JoinComponent;
  let fixture: ComponentFixture<JoinComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ JoinComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(JoinComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

.component.html

.component.css

 

위와 같이 생성된 컴포넌트는 자동으로 모듈파일의 'declarations' 아래 등록됩니다 (수동으로 생성 시에는 모듈에 직접 등록해 주어야 함)

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { JoinComponent } from './join/join.component';

@NgModule({
  declarations: [
    AppComponent,    
    JoinComponent, // 등록위치  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,    
    BrowserAnimationsModule,    
    AngularMaterialModule
  ],
  bootstrap: [AppComponent],
  entryComponents: [ErrorComponent] // this is a way to let angular detect a component when a component is not registered using a selector of in a routing module
})
export class AppModule {}

 

마무리

이상으로 앵귤러 컴포넌트에 대해 알아보았습니다.

 

---

 

참고

Angular