Angular 컴포넌트 개요

컴포넌트는 Angular 애플리케이션을 구성하는 기본 단위입니다.

• 화면을 렌더링하는 HTML 템플릿
• 동작을 정의하는 TypeScript 클래스
• 컴포넌트를 템플릿에 추가할 때 사용하는 CSS 셀렉터
• 추가로 컴포넌트가 표시되는 모습을 정의하는 CSS 스타일

1. 컴포넌트 생성하기

1.1 Angular CLI로 컴포넌트 생성하기

컴포넌트를 생성하는 방법 중 가장 쉬운 방법은 Angular CLI를 사용하는 것입니다.

• Angular CLI 사용 방법

  1) 터미널 창을 열고 애플리케이션 폴더로 이동합니다.

  2) ng generate component <컴포넌트 - 이름> 명령을 실행해서 컴포넌트를 생성합니다.

  • 명령을 실행하면 컴포넌트가 이렇게 구성됩니다.
    • 컴포넌트 이름으로 폴더 생성
    • <컴포넌트-이름>.component.ts 컴포넌트 파일 생성
    • <컴포넌트-이름>.component.html 템플릿 파일 생성
    • <컴포넌트-이름>.component.CSS 스타일 파일 생성
    • <컴포넌트-이름>.component.spec.ts 테스트 파일 생성

1.2 수동으로 컴포넌트 생성하기

• CLI로 컴포넌트를 생성하는 것이 가장 쉬운 방법이지만, 수동으로 생성하는 법에 대해 이해는 하고 넘어가고싶어서 정리합니다.

  • Angular 프로젝트로 이동합니다.

  • <컴포넌트-이름>.componet.ts 라는 이름으로 새 파일을 만듭니다.

  • 이 파일 시작부분에 import 코드를 추가합니다.

    import { Component } from '@Angular/core'

  • import 구문 뒤에 @Component 데코레이터를 추가합니다. / selector, template, style 각 항목에 맞는 component 이름과 URL 정의

    @Component({
    	selector: 'app-component-overview' // Component 이름
    	templateURL: 'app-component-overview.component.html' // html(view) file url 등록
      	styleUlrs: ['./component-overview.component.css']	// CSS file url 등록
    })

  • 컴포넌트 템플릿 정의하기

    • 템플릿은 컴포넌트가 애플리케이션에 렌더링될 모습을 지정하는 HTML 조각입니다. 템플릿은 컴포넌트 파일을 직접 정의하거나, 별도 파일로 만들고 컴포넌트에 불러오는 방식으로 사용합니다. 템플릿을 별도 파일로 정의하려면 @Component 데코레이터의 templateUrl 프로퍼티를 지정하면 됩니다.
    • 컴포넌트를 정의하려면 template이나 templateUrl 중 하나는 반드시 정의해야 합니다. 다만, 둘을 동시에 지정할 수는 없습니다.

    // 컴포넌트 파일을 직접 정의하는 방법
    @Component({
    	selector: 'app-component-overview', // Component 이름
    	template: '<h1>Hello World!</h1>', // html(view) file url 등록, 여러줄 정의 시 백틱(``)사용
    })
    // 컴포넌트 파일을 URL로 가져오는 방법
    @Component({
    	selector: 'app-component-overview', // Component 이름
    	templateURL: 'app-component-overview.component.html', // html(view) file url 등록
    })

  • 컴포넌트 스타일 지정하기

    • 템플릿에 적용될 컴포넌트 스타일은 컴포넌트 안에 직접 정의하거나, 별도 파일로 만들고 컴포넌트에 불러오는 방법을 사용합니다. 컴포넌트 스타일을 별도 파일로 정의하려면 @Component 데코레이터의 styleUrls 프로퍼티를 지정하거나, 직접 원하는 스타일을 지정할 수 있다.

      // Style을 직접 정의하는 방법
      @Component({
      	selector: 'app-component-overview', // Component 이름
      	template: '<h1>Hello World!</h1>', // html(view) file url 등록, 여러줄 정의 시 백틱(``)사용
        styleUrls: ['h1 { font-weight: nomal; }']
      })
      // Style 파일을 URL로 가져오는 방법
      @Component({
      	selector: 'app-component-overview', // Component 이름
      	templateURL: 'app-component-overview.component.html', // html(view) file url 등록
        styleUrls: ['./component-overview.component.css'],
      
      })

  • 컴포넌트 클래스를 정의하는 class 구문을 추가합니다.

    export class ComponentOverviewComponent	{
    }