앵귤러 튜토리얼 (Angular tutorial) - 4

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

이번에는 component.ts와 component.html의 관계에 대해서 조금 더 알아보도록 하자.

 

먼저 app.component.ts라는 파일은 앞서 이야기한바와 같이 화면을 구성하기 전 파일이다.

html 파일이 생성되기 전에 해야될 일을 적어두고, 적어놓은 각종 규칙, 설정 및 기능에 대해서 준비를 한 다음에 html파일을 만들어서 사용자에게 보여주는 역할을 담당한다.

계속 살펴 보았던 app.component.ts 파일을 열어보자.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    //생략..
}

 

해당 컴포넌트파일에서 @Component()라는 부분을 살펴보자.

해당 부분은 앵귤러의 데코레이터 중 1개로 해당 파일이 컴포넌트임을 명시하는 역할을 한다. (네..? 뭔소리??)

쉽게 말해서, 해당 파일은 *.html 파일이 만들어지기 전에 앵귤러가 읽어들이는 설정파일 같은 개념이다.

해당 데코레이터에 어떠한 내용도 없다면 앵귤러는 동작을 하지 않는 다는 것 이다.

 

단순한 개념으로 본다면 데코레이터 = json형식 기반의 앵귤러 설정 방법이라 볼 수 있다.

간단한 예제로 조금 더 살펴보자.

아래처럼 코드를 변경하자.

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',  //기존내용을 주석처리하고
  template : '<div>뭥미</div><div>이것은 title : {{title}}</div>',  //요 부분만 추가 해 보자.
  styleUrls: ['./app.component.css']
})

 

놀랍게도 해당 내용을 적용하면 기존에 app.component.html에 쓴 내용이 하나도 반영이 안되고...template라는 내용이 전부 반영 된 것을 알 수 있다.

사용자가 어떠한 내용을 추가하던지 간에 app.component.ts 파일이 먼저 읽혀서 화면을 구성 할 준비를 하고 그 이후에 *.html파일을 구성하는 것을 볼 수 있다.

만약 기존 html 파일을 보기 운한다면 template를 주석(삭제)하고 기존 templateUrl을 주석해제 하도록 하자.

 

앵귤러에서 화면구성 = 컴포넌트 임을 기억하자.

앵귤러를 통해서 html을 구성 할 때는 "컴포넌트에 의해서 화면이 구성된다." 라는 개념을 잊지 말도록 하자.

이러한 컴포넌트는 컴포넌트 데코레이터 를 통해서 사용할 수 있다는 점도 기억하자.

 

그럼 @Component 밑의 export class라는 기호는 뭘까?

export는 내용 그대로 방출, 보내는 뜻이다. export를 하지 않으면 내부에서만 사용되는 의미가 되며, 해당 내용을 지우고 실행하여보면 아래 사진처럼 오류를 보게 된다.

뭐..뭐라구요..?

 

컴포넌트를 구성 할 때 export를 반드시 붙인다고만 기억하자.

export 앞에 class는 각종 메소드, 변수등을 묶는 꾸러미 같은 개념으로 이해하면된다.

맨 위 상단의 import는 javascript에서의 <script src='파일.js' /> 와 동일한 기능이다.

원하는 js파일을 가져올 때 처럼 마찬가지로 앵귤러에서의 import도 동일한 기능이다.

 

정리하여보면,

1. 컴포넌트 파일은 화면을 구성하는 기초 파일 이다.

2. 컴포넌트 파일에 쓰여진 코드가 읽혀지고 나서, 이후에 화면을 구성 한다.

3. @Component는 앵귤러의 데코레이터 일종이다.

4. 컴포넌트 파일을 구성 할 때는 @Component 데코레이터와 export class 이름{} 라는 부분이 필요하다.

 

여기까지 이해를 하였다면 이제 ngIf와 ngFor에 대해서도 이해하기가 쉬워진다.

컴포넌트 파일에서 컴포넌트 데코레이터의 template를 지우고(주석) templateUrl로 바꾸자.

요렇게..다시 원래대로 돌립시다.

 

app.component.html파일을 살펴보자. 컴포넌트 데코레이터에서 templateUrl을 명시 하였기 때문에 app.component.html파일이 읽힐 것이다.

ngIf는 컴포넌트.ts 파일에서 쓰여진 변수들이 실제 존재 하는지를 지속적으로 감시(?)하는 디렉티브라고 한다.

 

사용법은 컴포넌트.ts 파일에서 선언한 변수에 대해서 조건을 주는 방식으로 쓰여진다.

조건문은 일반 자바스크립트와 거의 동일하다.

마찬가지로 ngFor는 컴포넌트.ts파일에서 쓰여진 변수에 대해서 해당 변수가 배열형태의 반복문이 실행 가능한 데이터 이면 해당 데이터에 맞추어서 실행되는 개념이다.

<div *ngFor="let item of all">서버에 갔다왔다고 한 데이터 : {{item}}</div>

 

let item은 all이라는 변수에서 반복문을 통해 나오는 1개의 데이터를 의미한다.

{{item}}이라고 쓰여진 부분은 all이라는 변수에서 반복문을 통해 나온 각각의 데이터를 의미한다.

<div *ngFor="let item of all;let idx = index;">서버에 갔다왔다고 한 데이터 : {{idx + 1}}, {{item}}</div>

 

idx는 순서, 반복문이 동작할 때의 순서를 의미한다. 콜른; 을 통해서 내용을 구분지을 수 있다.

앵귤러가 편한 것은, 이러한 내용을 선언만 해 두고 데이터가 변하는 내용에 따라서 동적으로 적용시켜 준 다는 점이다. 즉, 지금은 데이터가 없지만 데이터가 바뀌거나, 생기거나, 삭제되는 모든 행동이 서로 통신하듯 적용 되어 바로바로 바뀐다는 점이다. (양방향데이터바인딩....)

 

여기까지 이해가 되지 않는다면 다음부터의 내용이 많이 어려울 수 있다.

최대한 쉽게 풀어서 내용을 기술하였기에 명칭, 용어가 난해할 수도 있다.

다음장에서는 데이터를 통한 화면구성에 대해 조금 더 알아보도록 하자.

앵귤러의 전체 구조, 실제 서버에 적용시키는 방법, 데이터베이스와의 관계 등등에 대해서는 일단 잠시 넘어가도록 하자.

 

간단하게 내용을 정리하여보면,

1. 데코레이터(@로 시작하는)는 앵귤러의 설정을 담당하여준다.

2. 컴포넌트 데코레이터(@Component)는 화면구성을 담당하는 파일이다.