component란?

• 독립적으로 동작 가능한 UI 요소
• HTML 템플릿, 스타일, 로직을 결합( 형태 표현과 기능 제어 )
• DOM과 같은 트리 구조
• W3C 표준 웹컴포넌트 기술 기반
  https://developer.mozilla.org/ko/docs/Web/Web_Components

react와 달라보이는 점

angular는 리액트와 달리 컴포넌트와 템플릿이 한쌍이 되어서 하나의 컴포넌트를 이룬다.
TODO: 음.. 불편한걸지 명확한 구분이 더 좋을지는 지켜봐야겠다.

component 작성

@component 는 decorator라고 합니다.
구성요소로는 selector, template 혹은 templateUrl, styles 혹은 styleUrls 입니다.
selector : 컴포넌트 식별자.
template: html 코드
style: css 코드

// sample2.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-sample2',
    templateUrl: './sample2.component.html',
    styleUrls: ['./sample2.component.css'],
})
export class Sample2Component {

}

모듈에 등록

app.module.ts에 등록하면 app.component.html에서 컴포넌트를 태그처럼 사용가능

@NgModule({
  declarations: [
    AppComponent,
    Sample1Component,
    Sample2Component,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

단축키

매번 앵귤러 컴포넌트 하나 만들때마다 3~4개의 파일을 만들고 app.module.ts에 등록하는 과정이 매우 귀찮아서 이를 단축시켜주기 위해 명령어가 존재함.

ng g c [만들 컴포넌트 경로에 맞춰 컴포넌트 이름까지 작성]
ng g c [만들 컴포넌트 경로에 맞춰 컴포넌트 이름까지 작성] -it -is // 인라인 템플릿, 인라인 스타일 옵션