TIL - 23.12.05(Angular)

빌딩 블록

일반적으로 어떤 시스템이나 소프트웨어 아키텍처에서 기본 구성 요소를 나타내는 용어이다.

Angular에서의 빌딩 블록

소프트웨어를 구성하고 구축하는데 사용되는 주요 구성 요소를 나타낸다.

빌딩블록 구성요소

1. 컴포넌트
2. 모듈
3. 서비스
4. 지시자
5. 라우터

생성자

constructor는 클래스의 인스턴스가 생성될 때 JavaSciprt에서 호출하는 메서드이다.
이 메서드 안에 있는 모든 것이 인스턴스를 만드는데 사용된다.

형태

class MyClass {
	constructor(){
    
    }
}

HTML 속성 바인딩

일반 HTML

<input value="Hello World">

속성 바인딩
원하는 속성을 대괄호로 묶고 클래스 멤버에게 전달한다.

<input [value]="title">

ElementRef

Angular에서 DOM 요소에 접근하기 위한 기본적인 방법중 하나이다.
ElementRef는 Angular의 @ViewChild나 @ViewChildren 데코레이터와 함께 사용되어 특정 DOM 요소에 접근할 때 주로 활용된다.

ElementRef를 사용하면 해당 요소에 직접적으로 접근할 수 있지만, 이는 일반적으로 Angular의 추상화를 우회하는 것이기 때문에 주의해야한다.

디렉티브(Directive)

HTML 요소의 동작이나 모양을 변경하거나 확장하기 위해 사용되는 특별한 지시자이다. 디렉티브를 사용하면 HTML 요소에 새로운 동작이나 속성을 추가하거나, 기존의 동작이나 속성을 추가하거나, 기존의 동작이나 속성을 변경할 수 있다.

앵귤러에서는 세가지 유형의 디렉티브가 있다.

1. 컴포넌트 디렉티브
   컴포넌트 디렉티브는 컴포넌트와 관련된 디렉티브로, Angular 어플리케이션에서 사용자 인터페이스를 만들기 위해 주로 사용된다. 컴포넌트 디렉티브는 @Component 데코레이터를 사용하여 정의된다.

  @Component({
    selector: 'app-example',
    template: '<p>This is an example component.</p>',
  })
  export class ExampleComponent {
    // 컴포넌트 로직이 여기에 옵니다.
  }

2. 구조 디렉티브
   구조 디렉티브는 DOM 트리의 구조를 변경하거나 조작한다. 주요 구조 디렉티브로는 ngIf, ngFor, ngSwitch 등이 있다.

  <div *ngIf="isVisible">Visible Content</div>
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>

3. 속성 디렉티브
   속성 디렉티브는 HTML 요소의 속성을 변경하거나 동적으로 설정한다. 주요 속성 디렉티브로는 ngClass,ngStyle 등이 있다.

  <div [ngClass]="{'my-class': isSpecial}">Dynamic Class</div>
  <p [ngStyle]="{'color': textColor, 'font-size': fontSize}">Styled ![](https://velog.velcdn.com/images/spdhsrnvl123/post/a1dcabc6-f732-4fae-bed5-118830f6ff38/image.png)
Text</p>

결론 : 디렉티브는 Angular 애플리케이션에서 재사용 가능한 코드를 작성하고, 코드의 가독성과 유지보수성을 향상시키는데 도움이 된다.

@Input

@Input() 데코레이터는 자식 컴포넌트/디렉티브에 있는 특정 프로퍼티가 부모 컴포넌트/디렉티브에서 받는다는 것을 지정하는 데코레이터이다.

• @Input() 데코레이터는 부모-자식 관계에서만 사용할 수 있다.

자식컴포넌트에서 설정

//src/app/item-detail/item-detail.componet.ts
import { Component, Input } from '@angular/core';

@Component({
	selector : 'app-todo=item,
  	template : `
		<p>Today's item : {{item}}</p>
	`
})

export class ItemDetailComponent{
	@Input() item = '';
}

부모컴포넌트에서 설정

<!--src/app/app.component.html -->
<app-item-detail [item]="currentItem"></app-item-detail>

//src/app/app.component.ts
export class AppComponent {
	currentItem = 'Television';
}

@Output

자식 컴포넌트/디렉티브에 @Output() 데코레이터를 사용하면 부모 컴포넌트/디렉티브로 데이터를 전달