Angular Component

# Component의 정의

- 하나의 레고 블럭을 Component라고 생각하면 된다.

<app-root>

<title> <todos>

<todo> <add-todo>

- 컴포넌트 안에 컴포넌트가 들어갈 수 있다.

- 컴포넌트는 View와 Logic으로 구성되어 있다.

- 컴포넌트는 Class와 @Component..(TypeScript) 로 시작되는 Decoration으로 구성되어 있다.

- Class는 Logic을 담당하고, @Component 내 meta정보들을 통해 참조하는 파일들(.html,.css)이 View를 담당한다.

 

# Component 내 Class

- Class가 하나의 컴포넌트라고 봐도 무방하다.

- Class 내 속성과 메소드를 통해 View와 데이터를 주고 받는다.

 

# Component 내 @Component Decoration

- @Component란 TypeScript 요소이다.

- @Component란 하나의 함수를 호출한다고 생각하면 되고, meta data를 입력값으로 제공한다.

Tip. @Component의 meta 데이터

- selector 속성 : Html 선택자(쿼리) 클래스를 선택하려면 .을 사용하고, id를 선택하려면 #을 사용

(ex) "app-todos"로 지정되어 있을 경우, 해당 Component를 참조하는 부모 Component의 .html 파일 내에서, <app-todos></app-todos> 형식으로 되어 있는 태그를 선택하여, 해당 Component를 적용하겠다고 선언하는 의미

- templateUrl : 컴포넌트가 View와 Logic을 가지고 있다고 헀는데, View를 Template이 담당한다고 볼수 있고, 해당 속성은 해당 template의 url을 적어준다.

todo.component.html처럼 (컴포넌트명).component.html 형식으로 이루어져 있다.

`` 기호로 감싸고, 직접 html 태그 입력이 가능하다.

- styleUrl : [] : 여러 스타일의 style sheet를 지정할 수 있다.

todo.component.css 처럼 보통 하나의 css 파일을 참조한다.

 

# 컴포넌트 안에 컴포넌트 선언하기

- cd todos : 부모 컴포넌트 폴더로 이동 

- ng g c todo --inline-template --inline-style --export : 부모 컴포넌트 내 컴포넌트 생성

- todo.component.ts(자식 컴포넌트) 상에서, templateUrl을 원하는 태그로 변경

- todos.component.html(부모 컴포넌트) 상에서, <app-todo></app-todo> 태그를 사용가능하다.

 

Tip. ng generate component 명령어의 Argument

- export 속성의 경우, component.ts 생성시, 외부 모듈에서 참조할 수 있도록 export class 처리를 해준다.

- inline-template 속성의 경우, component.html 파일을 생성하지 않고, templateUrl 속성에 ``기호 안에 직접 html 태그를 작성

- inline-style 속성의 경우, component.css 파일을 생성하지 않고, styleUrl 속성에 []이 들어간다.

 

 

Tip. ES6의 Template Literal이란?

templateUrl이 위치하는 자리에 (컴포넌트명).component.html의 경로가 아닌, ` 기호로 시작하고, `기호로 닫아서, 직접 html 태그를 입력할 수 있다.

 

//src\app\todo\todos\todo\todo.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo',             //★, 태그 정보 입력
  template: `
    <input type="checkbox">운동하기  //★, 직접 태그 입력 
  `,
  styles: [
  ]
})
export class TodoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
//src\app\todo\todos\todos.component.html
<div class="title">
    <h1>나의 하루</h1>
    <h2>5월 25일</h2>
</div>
<div>
    <div>
        <app-todo></app-todo> //★
    </div>
    <div>
        <app-todo></app-todo> //★
    </div>
</div>
<div>
    <input type="text" placeholder="할 일 추가">
</div>