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

저번시간에는 앵귤러의 컴포넌트에 대해서 살펴 보았습니다.
이번시간에도 마찬가지로 컴포넌트에 대해서 알아보겠습니다!

앵귤러의 컴포넌트는 화면구성을 담당합니다.
컴포넌트 파일(*.ts)에 쓰여진 데이터를 html 파일에 표출하기도 하고, 데이터를 서버에 CRUD하는 역할을 하기도 합니다.
이러한 컴포넌트는 기본적으로 class 형태로 구성되어 있습니다.
앵귤러에서 컴포넌트 파일을 만든다는 것은 class로 이루어진 파일에 컴포넌트 데코레이터(@Component)를 붙여주는 것 입니다.
형태를 다시한번 보겠습니다.

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

@Component({
 //key, value 형식의 내용
})
export class MyCustomComponent {
    //각종 기능들
}

 

컴포넌트를 만들 때 유의해야 될 점은 바로 export라는 명령어 입니다.
export라는 명령어는 해당 클래스를 외부에서 사용 할 수 있도록 해 주는 기능입니다. * ES6 문법입니다.
해당 명령어가 없다면 해당 클래스는 외부에서의 사용이 불가능 합니다.
위 코드의 모습이 항상 컴포넌트의 기본구성임을 잊지 말아야 합니다!

 

컴포넌트 내부의 기능을 살펴보겠습니다.
1) selector
 -> 셀렉터는 컴포넌트의 고유 이름입니다. 아직은 살펴보지 못하지만, "고유 이름" 정도로만 알면 됩니다.
 -> 다음시간에 셀렉터의 기능을 써 볼 것 입니다!
2) templateUrl
 -> 해당 컴포넌트에서 사용 할 html 파일의 위치를 의미합니다. 
3) styleUrls
 -> 해당 컴포넌트에서 사용 할 css 파일의 위치를 의미합니다.

 

여기서 언급되지는 않았지만, animation, template 등등 더 많은 기능이 존재합니다.
아직 우리에게 필요한 기능은 위에 나온 3가지 기본 기능 입니다.
3가지 기본기능에 대해서 꼭 숙지하여야 합니다.

이제 해당 컴포넌트에서 사용한 html 파일로 가 보겠습니다.

app.component.html 파일을 선택하여봅니다.

내부에 사용된 명령어의 기능을 살펴보겠습니다!

 

html 파일에 쓰여진 기능을 살펴보겠습니다.

 

요기 대괄호 입니다!

 

1) 앵귤러의 표현식 {{}}
 -> 앵귤러에서의 표현식 기호는 대괄호 2개를 사용하여줍니다.
 -> 이 대괄호 2개에 컴포넌트 파일에서 사용한 데이터 이름을 입력하면 html 파일에 나타낼 수 있습니다.
 -> private한 값은 표현 할 수 없으며, protected하거나 public한 데이터만 표현합니다.
 -> 데이터가 객체(Array, Object 등)형태는 Object라고 표현하며, 문자 및 숫자, 논리값은 정상적으로 나타냅니다.
 -> 이러한 앵귤러에서의 표현식은 내부 컴포넌트의 데이터가 변하면 자동으로 변하게 됩니다.
 -> 예를들어 컴포넌트 내부 변수 title의 데이터가 변하면 html 파일에서 알아서 스스로 변한 값을 적용시켜 줍니다.
 -> 이것을 "양방향 데이터 바인딩"이라고 불리웁니다. (말이 어려우면 넘어갑시다!)

 

소괄호 click입니다!

 

2) 클릭 기능
 -> html에서 onclick이 존재하였다면 앵귤러에서는 소괄호에 click으로 기능을 사용 할 수 있습니다.
 -> (click)을 선언 해 주고 대입연산자를 통해 해당 클릭 이벤트 이후에 동작 할 함수를 써 주면 됩니다.
 -> 앵귤러에서 통상적으로 html에서 소괄호의 의미는 해당 컴포넌트에게 이벤트 또는 데이터를 전달하는 의미 입니다.

 

*ngFor 입니다!

 

3) 구조 지시자(디렉티브)
 -> 구조 지시자는 html 테그 안에서 *기호옆에 명령어를 붙여준 뒤, 대입 연산자를 통해 동작할 명령어를 입력합니다.
 -> 지금 예문으로 설명하면, showArray는 우리가 만든 컴포넌트의 내부에 존재하는 배열 값 입니다.
 -> 이러한 배열 showArray를 단순히 표현식으로 html파일에 나타내면 {{showArray}} 실제로는 문자형태 [Object object] 라고 표기만 해 버립니다.
 -> 구조 지시자는 컴포넌트에 존재하는 데이터를 html 파일에서 세부적인 동작이 필요한 경우 사용합니다.
 -> 데이터를 html 파일에 나타낼지(조건문), 반복해서 나타낼지(반복문) 등에 대해서 사용합니다.
 -> 여기 컴포넌트에 사용한 ngFor 라는 구조 지시자는 컴포넌트의 데이터 중 배열형태의 데이터에 대해 사용합니다.
 -> 대입 연산자를 통해 쓰여진 명령어를("let item of showArray") 살펴보면, 변수 item은 of 라는 명령어를 통해 showArray의 존재하는 데이터 1개씩을 받는 변수 입니다.
 -> 결국 ngFor 디렉티브에 의해서 showArray의 데이터가 item에 1개씩 반복문 형태로 동작을 하게 됩니다.
 -> 이러한 반복문은 div테그에 적용 되었으며 div테그도 같이 반복문에 의해서 showArray 갯수만큼 만들어지게 됩니다.
 -> 이때 표현식을 통해서 item이라는 변수에 존재하는 데이터를 html파일에 나타내도록 합니다. {{item}}
 -> 내부에 표현식을 쓰지 않고 일반 문자나, 숫자, 다른 엘리먼트(테그)를 한번 사용 해 보세요!

 

여기까지 html 에 쓰여진 명령어에 대해서 살펴 보았습니다.
표현식, 구조지시자(디렉티브)는 컴포넌트에 존재하는 데이터를 html 파일에 나타낼 때 쓰는 방법입니다.
여기 3개의 기능에 대해서는 반드시 다양한 방법을 통해서 연습 해 보아야 합니다!!

 

그런데, 우리가 개발해야 될 페이지가 1장이 아니라 1장 이상인 경우에는 어떻게 해야되는 것 일까요?
당연히 컴포넌트 파일을 여러개 만들면 될 것 입니다.
여러개의 컴포넌트를 만들었다고 하지만, 그 파일관리와 접근은 어떻게 해야 되는 것 일까요?

module이라는 파일 입니다!

 

src - app 탭으로 이동하여보면 app.module.ts 이라는 파일이 존재합니다.
해당파일을 더블클릭하여 내용을 살펴보면, @기호(꾸밈말, 데코레이터)가 붙은 클래스가 보입니다.
@기호가 붙었다는 것은 앵귤러의 기능을 의미하는 데코레이터가 붙은 것을 의미합니다.
* 앞으로 @기호(꾸밈말, 데코레이터)가 있으면 앵귤러의 기능이라고 먼저 생각하면 좋습니다!
NgModule이 붙어있으므로 "NG모듈" 라고 할 수 있으며 줄여서 "모듈" 이라고 합니다.

 

모듈은 3번째 장에서 잠깐 언급하였던 파일입니다.
각종 세팅, 정보 및 내용을 컴포넌트가 동작 할 수 있게 해주는 일종의 설정파일, 가이드파일 개념이라 할 수 있습니다.
모듈내부를 자세히 보시면 AppComponent 라는 내용을 볼 수 있습니다.
AppComponent는 우리가 여태껏 보아왔던 컴포넌트 파일 입니다!

모듈이라는 파일과 컴포넌트가 뭔가 관계가 있어보입니다?

어떠한 방법을 사용해야 되는지 모르겠지만 중요한 사실은 모듈에 각종 설정과 컴포넌트들을 등록 한 다면 다양한 화면을 보여 줄 수 있는 것은 확실합니다.
여기서 이해해야 될 부분은,
모듈을 통해서 다양한 컴포넌트를 관리 할 수 있다라는 점 입니다.

여기까지 컴포넌트에서 사용된 기능과, 모듈이 무엇인지 아주 간단하게 소개를 해 보았습니다.
모듈에 대해서는 좀 더 알아볼 예정이므로 지금 이해가 되지 않는다 해도 걱정할 필요는 없습니다!

다음시간에는 간단하게 살펴본 디렉티브, 표현식의 다양한 예제와 컴포넌트와 모듈의 구성에 대해서 살펴보겠습니다.