앵귤러 튜토리얼(Angular tutorial) - 4 : 컴포넌트

저번시간까지는 앵귤러에서의 컴포넌트의 역할에 대해서 간단하게 살펴 보았습니다.
컴포넌트는 앵귤러에서 화면구성, 이벤트에 대한 행위를 담당 합니다.
우리가 html파일에서 여러 tag로 만든 화면, <script> 테그 안에 선언한 다양한 이벤트, 변수 등에 대한 행위 이러한 사용자 ui와 직접적으로 동작하는 것이 바로 컴포넌트입니다.

그러면 컴포넌트에 대해 몇가지 예제를 통해서 좀 더 알아보겠습니다.

firstStudy 프로젝트로 이동한 뒤에 src - app으로 이동합니다.

경로 햇갈리지마세요!

 

그리고 app.component.ts 파일을 더블클릭합니다.

배열과 함수를 추가하여보았습니다.

아래 내용으로 수정하여주세요.

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

const array : Array<string> = ['data0','data1','data2']

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title : string = 'firstStudy';

  constructor (){

  }

  public clickAfterPrint () : void{
    this._innerFunc();
    console.log(array);
    console.log(this.title);
  }

  private _innerFunc(){
    array.push('data' + array.length);
  }
}

 

app.component.html 파일 내용을 아래처럼 바꾸어주세요. (html파일입니다!!)

기존내용을 전부 지우거나 주석처리해주세요.

<button (click)='clickAfterPrint()'>{{title}} <-당신이 입력한 변수 title </button>

그런 다음 아래처럼 작업용 서버를 구동합니다.
ng serve

버튼을 누를 때 마다 배열 array의 값이 추가되어 개발자도구에 출력되는 것을 볼 수 있습니다.

데이터가 계속해서 추가되어 출력됩니다!

 

내용을 천천히 살펴보겠습니다.

파일 이름은 app.component.ts 이며, 클래스 명칭은 AppComponent 클래스 입니다.

컴포넌트 데코레이터(@Component)가 사용되었기 때문에 해당 파일은 컴포넌트입니다.
따라서 해당파일은 아래처럼 부를 수 있습니다.
1. AppComponent 클래스
2. AppComponent 컴포넌트

 

통상적으로 첫번째 보다는 두번째 경우로 불려지는 것 같습니다.  
* 이것은 어디까지나 주관적인 입장입니다!!

다음으로 array라는 변수를 살펴보겠습니다.
array라는 변수는 class 바깥에 선언한 변수로 해당 컴포넌트 파일에서 글로벌하게 사용되는 변수 입니다.
array라는 변수는 class에 속하지 않기 때문에 class안에서 사용하는 변수 및 함수처럼 this를 붙여서 사용하지 않습니다.
* 클래스 안에 사용하는 함수 또는 클래스변수는 this를 사용하지만, 클래스 외부에서 선언한 변수 및 함수는 this를 사용하지 않습니다.

 

꺽은 괄호<>에는 데이터 형태를 지정 해 줄수 있습니다.

 

array변수 뒤에 Array<string> 라는 기호가 붙여있습니다.
자바스크립트와 달리 타입스크립트에서는 데이터의 형태를 지정 해 줄 수 있습니다.
변수에 대입해야 될 데이터 형태를 지정하므로써 개발자의 형 변환과 같은 실수를 사전에 방지 할 수 있습니다.
사용법은 매우 직관적이며, 콜른(:)뒤에 지정하고자 하는 자료형을 선언하여 주면 됩니다.

 

const array : Array<string> 의 의미는 변수명은 array 이면서 array가 가질 수 있는 자료형태는 문자(string)로 이루어진Array(배열)을 의미합니다.
꺽은 괄호<>는 제네릭을 의미하며, Java에서의 기능과 동일합니다.
제네릭을 간단하게 설명하면 Array에서 올 수 있는 데이터의 형태를 의미합니다.
array에 단순한 숫자, 날짜 형태의 데이터를 push하여보세요. 오류가 발생할 것 입니다.
* 타입스크립트를 가볍게라도 한번 꼭 살펴보셔야 합니다.

다음으로 살펴볼 클래스 안에서 만들어진 함수 _innerFunc 입니다. 
앞에 private 라는 기호가 붙어 있습니다.
private라는 기호는 "내부" 의 의미로 해당 함수는 다른 곳에서 사용 할 수 없는 함수를 의미합니다.

private, public이보입니다. 아무것도 없으면 protected입니다!

 

private와 protected, public 3가지의 형태의 접근 제어자를 타입스크립트는 제공합니다.
다른 곳에서 사용 못하고 오직 해당 클래스에서만 사용하게 하려면 private,
해당 클래스와 직접적으로 관계된 곳에서만 사용하게 하려면 protected,
누구든지 사용 가능하게 하려면 public을 붙여주면 됩니다.
앵귤러 기반에서의 클래스의 접근제어 기본 값은 protected 입니다.

앵귤러에서는 아무것도 명시하지 않으면 암묵적으로 protected로 지정되어 패키지 레벨로 공개됩니다.

만약 순수 Typescript로만 이루어진 프로젝트인 경우라면 접근제어자 기본은 public으로 선언이 됩니다.

여기서 _innerFunc 함수는 다른 곳에서 사용할 수 없는 함수이며 오직 해당 파일에서만 사용 할 수 있습니다.
_innerFunc함수는 this를 붙여서 clickAfterPrint 함수에서 사용되었습니다.

 

clickAfterPrint 뒤에 사용된 void라는 형태는 값이 없음을 의미합니다.

콜른뒤의 내용은 반환 값 입니다. void는 "없다" 입니다.

타입스크립트에서는 함수의 반환 값도 형태를 지정 할 수 있습니다.
변수에 데이터 형태를 지정한 것과 동일하게 함수의 소괄호 뒤에 콜른(:)을 사용한 뒤에 반환값을 지정 해 주면 됩니다.

여기까지 간단하게 컴포넌트의 내부에 쓰여진 코드를 살펴보았습니다.
조금 더 이해를 돕기위해 다시 코드를 조금 변경하여 보겠습니다.

app.component.ts  (AppComponent컴포넌트) 파일을 아래와 같이 수정하여봅니다.

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

const array : Array<string> = ['data0','data1','data2']

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title : string = 'firstStudy';
  
  showArray : Array<string>; //아직 초기화 되지 않았으며 protected한 변수 입니다.

  constructor (){  //생성자는 오직 1번만 클래스파일이 생성 될 때 동작 합니다.
    this.showArray = array;  //외부 array의 변수 값을 showArray게 참조하게 하였습니다.
  }

  public clickAfterPrint () : void{
    this._innerFunc();
    console.log(array);
    console.log(this.title);
  }

  private _innerFunc(){
    array.push('data' + array.length);  //배열값을 변화시킵니다.
  }
}

 

이어서 app.component.html 파일을 아래처럼 바꾸어 봅니다. (html파일입니다!!)

<button (click)='clickAfterPrint()'>{{title}} <-당신이 입력한 변수 title </button>
<div *ngFor="let item of showArray">{{item}}</div>

 

clickAfterPrint 함수 실행을 위해 버튼을 눌러봅니다!

누를때 마다 html파일의 내용도 같이 변합니다.

외부에 선언한 array값이 클래스 변수인 showArray가 참조하게 하였습니다.
click 이벤트를 통해 clickAfterPrint가 호출되면서 _innerFunc 함수가 array 변수에 데이터를 push하게 하였습니다.
array를 참조하는 showArray값이 변화를 할 때마다 신기하게도 화면의 데이터가 늘어나는 것을 볼 수 있습니다.

 

app.component.ts 파일의 내용이 지금 우리는 무엇인지 알 필요는 없습니다.
다만 컴포넌트 내부의 데이터가 변화하였을 뿐 인데 html파일에서의 내용이 변경되었다는 점 입니다.
만약에 clickAfterPrint 함수가 마치 ajax처럼 특정 주소에서 데이터를 등록, 수정, 삭제 또는 가져오는 기능이였다면 어땠을까요?

 

이처럼 컴포넌트에서는 직접적으로 화면과 관련된 일을 수행합니다.
데이터의 변화, 이벤트 등등 이러한 일을 컴포넌트에서 수행하며 처리합니다.

여기까지 앵귤러의 컴포넌트에 대해서 알아보았습니다.
타입스크립트를 어느정도 익혀야 앵귤러에 조금 더 쉽게 접근 할 수 있습니다.
사실, 타입스크립트는 앵귤러에서만 사용되는 것이 아니므로 익혀둘 경우 다양하게 사용 할 수 있습니다.

 

다음시간에도 이어서 컴포넌트에 대해서 좀 더 알아보도록 하겠습니다.
어렵거나 이해가되지 않는부분은 댓글 또는 메일로 언제든 연락주세요!

앵4.zip

0.00MB

 

* 추가

앵귤러, 리엑트, 뷰js 등 프론트 프레임워크(라이브러리)는 대체적으로 버전이 자주 올라갑니다.

이에 따라 기존에 사용되었던 기능이 버전업에 따라 동작을 하지 않을수도 있습니다.

만약 동작을 원활하게 되지 않는다면 아래 package.json 내용에서의 의존성(dependencies) 버전을 맞추어 주세요.

  "dependencies": {
    "@angular/animations": "~9.1.4",
    "@angular/common": "~9.1.4",
    "@angular/compiler": "~9.1.4",
    "@angular/core": "~9.1.4",
    "@angular/forms": "~9.1.4",
    "@angular/platform-browser": "~9.1.4",
    "@angular/platform-browser-dynamic": "~9.1.4",
    "@angular/router": "~9.1.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.4",
    "@angular/cli": "~9.1.4",
    "@angular/compiler-cli": "~9.1.4",
    "@angular/language-service": "~9.1.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }