[Angular] 모듈, 컴포넌트

모듈이란, 각종 설정과 관련된 내용이 존재하는 파일

컴포넌트는 모듈이 만들어준 환경에서 동작하여 실제 화면에 관한 내용을 직접적으로 수행하는 파일 

모듈이라는 파일을 활용하여 각종 기능에 대한 규칙, 필요한 라이브러리 및 정보등을 관리

컴포넌트라는 파일에서는 html파일에서의 각종 이벤트에 대한 내용, 데이터에 대한 처리 (리액트 컴포넌트와 같은 기능)

컴포넌트는 앵귤러에서 화면구성 및 각종 이벤트에 대해서 일을 수행하는 일꾼

 

app.component.ts

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

//데코레이터 영역
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

//컴포넌트 클래스 영역
export class AppComponent {
  title = 'firstStudy';

  constructor() {
    console.log('동작');
  }

 

앵귤러에 컴포넌트는 class 파일에 @Component라는 꾸밈말 데코레이터 가 붙여진 파일을 의미한다.

 

데코레이터란?

 

앵귤러에서 사용되는 일종의 명령어이다.

해당 파일이 앵귤러에서 사용되는 특수한 기능으로 사용되는 파일임을 알려준다.

 

import영역

컴포넌트에 필요한 의존 모듈을 import한다. 앵귤러가 제공하는 앵귤러 라이브러리 모듈의 경우, @가 붙어있으면 경로를 명시하지 않는다.또한 npm을 사용하여 설치한 의존 모듈 또한 경롤르 명시하지 않는다. 그외의 경우는 상대경로를 명시한다.

 

데코레이터 영역

@Component 데코레이터에는 메타데이터 객체를 인자로 전달한다. 메다데이터 객체는 컴포넌트 생성에 필요한 정보(셀렉터, 템플릿, 스타일정의 등)를 담고있는 객체이다. 

예를 들어 메타데이터 객체 templateUrl 프로퍼티에는 컴포넌트 뷰를 정의한 템플릿의 상대경로를 설정한다.

 

컴포넌트 클래스 영역

컴포넌트 뷰를 관리하기위한 로직을 담은 클래스를 정의한다. 컴포넌트 클래스는 컴포넌트의 내부 관심사인 뷰의 관리에 집중해야하며 애플리케이션 공통 관심사는 서비스로 분리하여야한다.

@Component 데코레이터 바로 아래에는 반드시 컴포넌트 클래스를 위치시켜야 한다. 
@Component 데코레이터는 자신의 바로 아래에 위치한 클래스를 컴포넌트 클래스로 인식한다.
따라서 데코레이터와 데코레이터가 장식하는 클래스 사이에는 아무 것도 존재해서는 않된다.

 

 @Component 데코레이터의 templateUrl 프로퍼티에 설정된 템플릿 src/app/app.component.html을 살펴보자.

 

---

템플릿은 컴포넌트의 뷰를 정의하기 위해 HTML과 Angular 고유의 템플릿 문법으로 작성한다.

템플릿 문법 : 인터폴레이션 Interporation 컴포넌트 클래스의 데이터를 컴포넌트에 바인딩한다. 

 

이런방식을 데이터바인딩이라하며, 인터폴레이션은 아래와 같이 작성한다.

{{ title }}

 

 

 

템플릿

컴포넌트의 뷰를 정의하기 위해 HTML과 Angular 고유의 템플릿 문법으로 작성된 코드

 

메타데이터 객체

컴포넌트의 설정정보를 담고 있는 객체. @Component 데코레이터는 메타 데이터객체를 인자로 받아 컴포넌트 클래스에 반영한다. 

 

컴포넌트 클래스

컴포넌트의 뷰를 생성하는 템플릿의 상태(state)를 관리한다. 데이터 바인딩을 통해 템플릿에 필요한 데이터를 제공하거나 템플릿에 발생한 이벤트를 처리한다.  

 

---

 

위에서 봤듯이 

모듈이라는 파일을 활용하여 각종 기능에 대한 규칙, 필요한 라이브러리 및 정보등을 관리한다.

 

그렇다면 ES6의 모듈과 Angular의 모듈은 어떻게 다를까?

 

ES6의 모듈?

애플리케이션을 구성하는 개별적 요소.

모듈은 파일 단위로 분리되어 있으며, 필요하면 불러서 (import) 어플리케이션의 일원으로 만들어준다.

기능별로 분리되어 작업하므로 개발 효율성과 유지보수의 향상에 좋다.

 

앵귤러의 모듈?

관련된 앵귤러의 구성요소를 하나로 묶어서 애플리케이션을 구성하는 하나의 단위로 만드는 역할  컴포넌트, 디렉티브, 서비스 등의 Angular 구성요소는 모듈에 등록되어야 사용할 수 있다.

 

---

데코레이터의 종류

클래스 데코레이터
@Component, @NgModule, @Directive, @Injectable, @Pipe

프로퍼티 데코레이터
@Input, @Output, @ViewChild, @ViewChildren, @ContentChild, @ContentChildren, @HostBinding

메소드 데코레이터
@HostListener

파라미터 데코레이터
@Inject

 

다시 컴포넌트로 돌아와

 

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

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

  constructor() {
    console.log('동작');
  }
}

 

import { Component } from @angular/core 에서 알 수 있듯이, @Component 데코레이터는 앵귤러 기본 core 패키지에 정의되어있어서 사용할 수 가 있다. 이것외에도 많은 객체들이 있는데, 객체분해할당을 통하여 다른 모듈도 사용할 수 있다. (core에 있는것들)

 

 

---

메타데이터.

 

class만 쓰면 일반 클래스.

@Component를 해주면 앵귤러에게 알려주는것이다 무엇이라고? 일반 클래스 노노. 컴포넌트의 클래스다!!

컴포넌트안에는 selector, tmeplateUrl 어쩌구저쩌구~~ 이런것들이 많은데 요것들을 메타데이터 객체로 인지한다.

그리고 이것을 인자로 전달받아서 컴포넌트 클래스에 반영하는 것이다.

 

selector 프로퍼티 

@Component 데코레이터 속성에서 selector에 쓰여진 내용을 사용하고자 하는 컴포넌트의 *.html 파일에 테그형태로 입력하면 해당 컴포넌트가 생성 된다.

 

즉 selector: app-root -> app-sophie 로 바꿨으면

<app-root> 부분을 => <app-sophie></app-sophie> 로 바꿔주면 된다.

 

 

template/ templateUrl 프로퍼티

 

root컴포넌트에서 이제 뷰! 보여질 부분을 만들어줘야한다. 

templateUrl : './app.component.html'