Angular 기초 문법 1 #
Find similar titles

Structured data

Category: Programming

앵귤러 컴포넌트
표현식
1. 표현식 사용
2. 파이프
데이터바인딩
내장 디렉티브
참고

앵귤러 컴포넌트 #

앵귤러 컴포넌트는 앵귤러 애플리케이션을 만드는데 사용하는 기본요소이다. 앵귤러 컴포넌트를 이용하면 애플리케이션에 대한 독립형 UI 요소를 만들 수 있다. 또한 타입스크립트 코드와 HTML 탬플릿을 통해 애플리케이션의 형태와 기능을 제어할 수 있다.

컴포넌트 설정 #

앵귤러 컴포넌트는 데코레이터 영역의 정의 및 로직을 정의하는 클래스 영역으로 두가지 주요 부분으로 구성된다. 데코레이터 영역은 선택자 이름과 HTML 템플릿을 비롯해 컴포넌트를 설정하는 데 사용된다. 클래스 영역을 이용하면 컴포넌트에 로직, 데이터, 이벤트 핸들러를 제공할 수 있을 뿐더러 다른 타입스크립트 파일에서 사용할 수 있도록 익스포트 할 수 있다.

데코레이터 영역의 정의

import {Component} from '@angular/core'
@Component({
    selector : 'my-app',
    template : '<p>My Component</p>'
})

로직을 정의하는 클래스 영역

export class AppComponent{
    title = 'Chapter 1 Example';
}

생성자 활용 #

앵귤러는 생성자를 활용해 컴포넌트의 기본값을 제공한다. 생성자는 컴포넌트 클래스에 들어간다. 생성자의 목적은 해당 클래스의 변수에 대한 기본값과 초기 설정을 지정해 해당 변수가 컴포넌트 내에서 사용될 때 절대로 초기화되지 않은 상태로 두지 않게 하는 데 있다.

    export class UsingAConstructor {
        name : string;
        constructor(){
            this.name = "Brendan";
        }
    }

외부 템플릿 활용 #

템플릿과 스타일시트를 앵귤러 컴포넌트에 통합하는 또 다른 방법은 별도의 파일을 사용하는 것이다. 이렇게 하면 파일이 하는 일을 구분할 수 있으므로 편리하다. 또한 컴포넌트를 읽기도 더 쉬워진다. @Component 데코레이터에서 templateUrl 키워드 다음에 애플리케이션의 루트와 템플릿 HTML 파일의 경로를 지정한다. 외부 스타일시트에 대해 알려주려면 sytleUrls 키워드를 사용한다. 외부 템플릿과의 차이점은 하나이상의 스타일시트 배열을 전달한다는 것이다.

@Component({
    selector : 'my-app',
    templateUrl : "./view.example.html"
    styleUrls : ["./style1.css", "./style2.css"]
})

표현식 #

앵귤러의 가장 큰 특징은 HTML 템플릿 내에 자바스크립트 같은 표현식을 추가할 수 있다는 것이다. 앵귤러는 표현식을 평가한 다음, 그 결과를 웹 페이지에 동적으로 추가할 수 있다. 표현식은 컴포넌트에 연결되기 때문에 컴포넌트의 값을 사용하는 표현식을 사용할 수 있으며, 모델이 변경될 때 해당 값이 변경될 수 있다.

표현식 사용 #

표현식을 사용하는 것은 앵귤러 뷰에서 컴포넌트의 데이터를 가장 쉽게 표현하는 방법이다. 표현식은 다음과 같이 대괄호로 감싼 코드 블록이다.

    {{ expression }}

앵귤러 컴파일러는 표현식의 결과가 표시되도록 표현식을 HTML 요소로 컴파일 한다.

{{ 1+5 }}
{{ 'One' + 'Two' }}

이 표현식에 따라 웹 페이지에서는 아래와 같이 값이 표시된다.

6
OneTwo

표현식은 데이터 모델에 바인딩되는데, 이는 두 가지 큰 이점을 제공한다. 첫째, 표현식 내부의 컴포넌트에 정의된 프로퍼티 이름과 함수를 사용할 수 있다. 둘째, 표현식이 컴포넌트에 바인딩되 있기 때문에 컴포넌트의 데이터가 변경되면 표현식에도 반영된다. 예를 들어 컴포넌트에 다음과 같은 값이 들어 있다고 해보자.

name : string='Brad';
score : number=95;

다음과 같이 템플릿 표현식에서 name과 score 값을 직접 참조할 수 있다.

Name : {{name}}
Score : {{score}}
Adjested : {{ score + 5 }}

파이프 #

앵귤러의 가장 큰 특징은 파이프를 구현할 수 있다는 것이다. 파이프는 표현식 파서에 개입해서 뷰에서 표시하기 위한 표현식의 결과를 수정하는 연산자의 한 종류다.

{{ expression | pipe }}

여러 파이프를 함께 연결하면 지정한 순서대로 실행된다.

{{expression | pipe | pipe }}

특정 필터를 이용하면 함수 매개변수 형태로 입력을 제공할 수 있다. 다음 구문을 사용해 이러한 매개변수를 추가한다.

{{ expression | pipe:parameter1:parameter2 }}

데이터바인딩 #

컴포넌트의 데이터를 웹페이지에 표시된 것과 연결하는 프로세스다.

삽입식 #

이중 중괄호({{}})를 사용해 템플릿 표현식을 평가하는 것과 관련이 있다. 이것은 하드 코딩된 형태일 수도 있고 컴포넌트 클래스의 속성을 참조할 수도 있다. 표현식과 비슷해 보일 수 도 있는데, 삽입식을 이용하면 HTML 태그 프로퍼티에 값을 지정할 수도 있다.

<img src="{{imgUrl}}"/>

프로퍼티 바인딩 #

HTML 요소의 프로퍼티를 설정해야 할 때 프로퍼티 바인딩을 사용하면 된다. 프로퍼티 바인딩은 컴포넌트 클래스 내에서 원하는 값을 정의해서 수행할 수 있다. 그러고 나서 다음 구문을 사용해 해당 값을 컴포넌트 템플릿에 바인딩한다.

<img [src]="myValue">

속성 바인딩 #

프로퍼티 바인딩과 비슷하지만 DOM속성이 아닌 HTML 속성에만 국한돼 있다. 일반적으로 속성에 해당하는 DOM 프로퍼티가 없는 경우에만 사용할 것이다.

<div [attr.aria-label]="labelName"></div>

클래스 바인딩 #

CSS스타일 태그를 HTML요소에 바인딩할 때 사용한다. 클래스 바인딩은 표현식의 결과에 따라 클래스에 true나 false를 지정한다. 결과가 true이면 클래스가 할당된다.

<div [class.nameHere]="true"><div>
<div [class.anotherName]="false"></div>

이벤트 바인딩 #

이벤트 바인딩은 클릭, 키 입력, 마우스 이동과 같은 사용자 입력을 처리할 때 사용한다. 앵귤러 이벤트 바인딩은 HTML 이벤트 속성과 비슷하다. 가장 큰 차이점은 바인딩에서 on 접두사가 제거되고 이벤트를 괄호(())로 감싼다는 것이다. 예를 들어, HTML의 onkeyup은 앵귤러에서 (keyup)으로 표현한다.

<button (click)="myFunction()">button</button>

내장 디렉티브 #

앵귤러가 제공하는 가장 강력한 기능 중 하나이며, HTML의 동작방식을 확장함으로써 애플리케이션에 특화된 기능이 포함된 사용자정의 HTML 요소, 속성, 클래스를 만들 수 있게 해준다. 앵귤러는 폼요소와 상호작용하고, 컴포넌트의 데이터를 뷰에 바인딩하며, 브라우저 이벤트와 상호작용할 수 있는 기능을 제공하는 여러 내장 디렉티브를 제공한다.

컴포넌트 디렉티브 #

앵귤러 컴포넌트는 템플릿을 활용하는 구조 디렉티브의 한 형태다. 컴포넌트에서는 HTML, CSS, 앵귤러 로직을 DOM에 동적으로 추가하기 위해 HTML 태그로 사용되는 선택자를 생성한다. 컴포넌트는 앵귤러의 핵심이다.

구조 디렉티브 #

다수의 디렉티브가 DOM의 요소를 동적으로 업데이트하거나, 생성, 제거하는 역할을 한다. 이러한 디렉티브는 애플리케이션의 레이아웃과 룩앤필을 만든다.

속성 디렉티브 #

앵귤러 속성 디렉티브는 HTML 요소의 모양과 동작을 수정한다. 속성 디렉티브는 HTML에 직접 삽입되어 사용자가 HTML과 상호작용하는 방식을 동적으로 변경한다. 속성 디렉티브는 일반 HTML 속성처럼 보이기 떄문에 이 같은 이름을 갖고 있다.

사용자 정의 디렉티브 #

사용자 정의 디렉티브를 이용하면 요소의 동작 방식을 직접 구현해서 HTML의 기능을 확장할 수 있다. DOM을 조작해야 하는 코드가 있다면 사용자 정의 디렉티브에서 이를 처리할 수 있다. 컴포넌트를 정의하는 것과 같은 방식으로 @Directive가 지정된 클래스를 호출해서 사용자 정의 디렉티브를 구현하면 된다. @Directive 클래스 메타데이터에는 HTML에서 사용할 디렉티브의 선택자가 포함되 있어야 한다. 디렉티브에 대한 로직은 디렉티브 익스포트 클래스에 배치한다.

import { Directive } from '@angular/core';
@Directive({
    selector : '[myDirective]'
})
export class myDirective { }

참고 #

러닝! 실무 예제로 배우는 앵귤러4 핵심가이드 - 위키북스 / 이대엽