Angular 2 구성 요소 소개

Angular 2 구성 요소 소개

구성 요소는 Angular 2 응용 프로그램의 기본 구성 요소이며 응용 프로그램에는 여러 구성 요소가 있을 수 있습니다. 구성 요소를 자체 논리와 데이터가 있는 응용 프로그램의 특정 보기로 간주할 수 있습니다.

7분 읽기

구성 요소는 Angular 2 응용 프로그램의 기본 구성 요소이며 응용 프로그램에는 여러 구성 요소가 있을 수 있습니다. 구성 요소를 자체 논리와 데이터가 있는 응용 프로그램의 특정 보기로 간주할 수 있습니다.

AngularJS 1.0에서는 데이터와 로직을 뷰에 묶거나 뷰에 커스텀 요소를 생성하는 컨트롤러, $Scope, 디렉시브 개념이 있었습니다. Angular 2에서는 구성 요소들이 컨트롤러, 범위, 지시가 수행하던 모든 작업을 수행합니다. 데이터, 논리, 사용자 지정 요소 모두 Angular 2의 컴포넌트를 통해 생성하거나 추가할 수 있습니다.

Angular 두 가지 애플리케이션은 컴포넌트를 중심으로 구축되어 있으며, 컴포넌트는 다음과 같은 관점으로 볼 수 있습니다:

  • 주형
  • Application Data
  • Logic
  • 스타일 등 다양한 주제

첫 번째 구성 요소를 만들어봅시다

페이지에 "Hello World"를 표시하는 아주 간단한 컴포넌트를 만드는 것부터 시작해 보겠습니다.

appcomponent.component.ts

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

@Component({ 
    selector: 'app-container',
    template: `<h1>{{message}}</h1>`
})
export class AppComponent {
  
    message : string = "Hello World";
    constructor() {
    }
}

구성 요소를 만드는 데는 주로 세 단계가 있습니다

  1. 클래스를 만들고 내보냅니다. 이 클래스에는 데이터와 논리가 포함됩니다.
  2. 수업을 @component 메타데이터로 꾸미세요. 기본적으로 메타데이터는 컴포넌트를 설명하고 다양한 속성의 값을 설정하므로, TypeScript 클래스를 Angular 2 컴포넌트로 사용할 수 있게 합니다.
  3. 필요한 라이브러리와 모듈을 가져와 구성 요소를 만듭니다.

위에서 논의한 세 단계는 아래 도표에서 시각화할 수 있습니다:

위에서 논의한 세 단계는 아래 다이어그램에서 시각화할 수 있습니다

보시다시피, Angular 2 구성 요소는 다음과 같습니다:

  1. 데이터와 논리를 저장하는 TypeScript 클래스;
  2. 앱 내 데이터를 표시할 수 있는 HTML 템플릿과 스타일. 이것은 사용자가 화면에서 보고 상호작용하는 뷰라고도 불립니다.
  3. 구성 요소의 동작을 정의하는 메타데이터입니다. 구성 요소 메타데이터는 @Component 데코레이터를 통해 클래스에 적용됩니다. 구성 요소의 다양한 동작은 객체의 속성으로 전달될 수 있으며, 이는 @Component 데코레이터의 입력 매개변수입니다.

이제 두 가지 구성 요소의 세 부분 Angular 자세히 살펴보겠습니다.

TypeScript Class in a Component

TypeScript 클래스는 타입이며, 컴포넌트의

  • data
  • Logic
  • 행동

​CalculatorComponent를 생성하는 데 사용되는 TypeScript 클래스는 다음 목록에 나타난 것처럼 만들 수 있습니다:

export class CalculatorComponent{
    num1: number ;
    num2 : number;
    result : number;
    add():number{
        this.result = this.num1 + this.num2;
        return this.result;
    };
    sub():number {
        this.result = this.num1 - this.num2;
        return this.result;
    }
}

사용자는 다양한 바인딩을 사용하여 구성 요소 클래스의 동작을 읽고, 수정하며, 호출할 수 있습니다:

  1. 보간
  2. 속성 바인딩
  3. 이벤트 바인딩
  4. Two-way binding

@Component Decorator 

TypeScript의 @Component 데코레이터는 TypeScript 클래스를 컴포넌트로 장식합니다. 이는 객체를 매개변수로 받아들이는 함수입니다. @Component 데코레이터에서는 다양한 속성의 값을 설정하여 컴포넌트의 동작을 설정할 수 있습니다. 가장 많이 사용되는 특성은 다음과 같습니다:

  • 주형
  • TemplateUrl
  • 지시문
  • 공급자
  • 스타일
  • StyleUrls
  • 파이프
  • Selector etc.

위에서 언급한 특성들 외에도 다른 특성들이 있습니다. 이제 이 중요한 특성들을 하나씩 살펴보겠습니다.

템플릿 및 템플릿URL

템플릿은 페이지에 렌더링되는 컴포넌트의 일부입니다. 템플릿은 두 가지 방법으로 만들 수 있습니다:

  1. 인라인 템플릿
  2. 외부 파일 내 템플릿

인라인 템플릿은 아래에 표시되어 생성될 수 있습니다:

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styles:["h1{color:red}"]

})

여기서 주목할 만한 중요한 점은 템플릿에서 여러 줄을 만들 때 사용하는 틸트 심볼입니다. 단일 인라인 템플릿은 단일 따옴표 또는 이중 따옴표를 사용하여 만들 수 있습니다.

복잡한 뷰는 인라인 템플릿 대신 외부 HTML 파일에 넣어야 한다는 데 동의합니다. Angular 2는 템플릿을 외부 HTML 파일에 넣을 수 있게 해주며, 템플릿 URL 속성의 값을 설정하여 컴포넌트와 연결할 수 있습니다. 관례상 템플릿과 컴포넌트는 같은 폴더에 두는 것이 더 좋습니다.

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    templateUrl: '/app/calculators/calculator.component.html',
    styles:["h1{color:red}"]
})

컴포넌트의 moduleId 속성을 설정하면 전체 경로를 주는 것을 피할 수 있습니다.

Selector

컴포넌트는 셀렉터를 사용해 사용할 수 있습니다. 위 예시에서 셀렉터 속성은 < app-container>로 설정되어 있습니다.페이지 내 컴포넌트나 다양한 뷰를 사용할 수 있습니다.

페이지 내 컴포넌트나 다른 뷰를 사용할 수 있습니다.

스타일과 스타일 URL

컴포넌트는 자체 스타일을 가질 수도 있고, 다양한 외부 스타일 시트를 참조할 수도 있습니다. 스타일을 다루기 위해 @Component 메타데이터는 styles와 styleUrls 속성을 가집니다. 아래 목록처럼 styles 속성의 값을 설정하여 인라인 스타일을 만들 수 있습니다:

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styles:["h1{color:red}"],

})

컴포넌트는 styleUrls 속성의 값을 설정하여 다양한 외부 파일을 참조할 수 있습니다.

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styleUrls:['app.component.css','./app/productorder.css']

})

공급자

실제 애플리케이션에서는 컴포넌트가 다양한 Angular 2 서비스나 맞춤형 서비스를 사용합니다. 컴포넌트에서 서비스를 사용하려면 두 단계를 따라야 합니다:

  1. 컴포넌트에서 서비스를 가져오고,
  2. 메타데이터에서 제공자 속성의 값을 설정하세요.

컴포넌트 메타데이터는 제공자(provider)라는 배열 타입 속성을 가집니다. 제공자 내에서는 컴포넌트에서 사용되는 서비스 목록을 전달합니다.  예를 들어, 다음 목록에서는 컴포넌트에 두 개의 서비스를 전달하고 있습니다: CalService와 InvoiceService.

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    providers:['CalService','InvoiceService']

})

Angular2에서 제공하는 서비스나 커스텀 서비스를 사용하려면 이 서비스들을 가져와서 메타데이터에서 제공자의 값으로 전달해야 합니다.

명령으로서의 중첩 구성 요소

Angular 2는 컴포넌트를 다른 컴포넌트 안에 사용할 수 있게 해줍니다. 컴포넌트 안에 컴포넌트를 사용할 때, 중첩된 컴포넌트라는 개념이 생깁니다. 중첩된 컴포넌트를 사용하려면 컴포넌트 메타데이터의 directives 속성을 사용해야 합니다.

중첩된 컴포넌트를 어떻게 활용할 수 있을지 살펴보겠습니다. TasksComponent라는 컴포넌트가 있고, 이 컴포넌트를 AppComponent 내에서 사용하고 싶다고 가정해 봅시다.  TasksComponent(자식 컴포넌트)를 AppComponent(부모 컴포넌트)의 중첩 컴포넌트로 사용하는 단계는 다음과 같습니다

  1. 부모 컴포넌트에서 자식 컴포넌트를 가져오기
  2. 자식 컴포넌트를 부모 컴포넌트 템플릿의 셀렉터로 사용하세요
  3. 부모 컴포넌트의 지시적 속성 값을 자식 컴포넌트에 설정합니다

아래 목록에서 보시다시피, 우리는 자식 컴포넌트인 TaskComponent를 가져오고, 이를 AppComponent에서 지시문으로 사용하고 있습니다. 컴포넌트를 중첩된 컴포넌트로 사용하려면 directives 속성의 값을 설정해야 합니다.

import { Component } from '@angular/core';
import {TasksComponent} from './task/tasks.component';

@Component({ 
    selector: 'app-container',
    template: `{{message}}<tasks></tasks>`,
    directives:[TasksComponent]
})

부모 컴포넌트에서 자식 컴포넌트로, 또는 그 반대로 데이터를 전달해야 하는 상황이 있을 수 있지만, 이에 대해서는 추가 블로그 게시물에서 자세히 다룰 예정입니다.

이렇게, 컴포넌트를 자식 컴포넌트로 사용하거나 부트스트랩으로 사용할 수 있습니다. 이 두 가지 구성 요소에 Angular 관한 소개 글이 도움이 되길 바라며, 읽어주셔서 감사합니다!

Angular How To
데모 요청