Angular 란?

- 구글에서 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크

- 단일 페이지 애플리케이션 (SPA)을 구축하는 데 매우 적합

- TypeScript와 함께 사용

- 정적 타입 검사 및 코드 예측 등의 이점을 제공

- 현재 앵귤러는 최신 버전인 앵귤러 15까지 출시

- 양방향 / 단방향 데이터 바인딩 둘다 가능

 

 

 

<기본개념>

1. 컴포넌트(Component)

컴포넌트는 애플리케이션을 구성하는 기본 단위이다. 컴포넌트는 @Component() 데코레이터가 붙는 TypeScript 클래스, HTML 템플릿, 스타일로 구성된다. 

 

• 컴포넌트가 템플릿에 사용될 CSS 셀렉터를 지정. 템플릿에서 이 셀렉터에 해당되는 HTML 엘리먼트마다 컴포넌트 인스턴스가 생성.
• Angular가 컴포넌트 내용으로 렌더링할 HTML 템플릿을 지정한다.
• 템플릿 HTML 엘리먼트의 모습을 지정해야 한다면 이 때 필요한 CSS 스타일을 지정한다.

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

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  // 여기에는 컴포넌트의 동작을 정의하는 코드가 들어갑니다.
}

 

2. 템플릿(Templates)

컴포넌트는 이 컴포넌트가 어떻게 렌더링될지 정의하기 위해 HTML 템플릿이 존재한다.

템플릿은 HTML 문법을 기본으로 작성하며 컴포넌트에 있는 값을 동적으로 반영하도록 구성한다.

그래서 컴포넌트의 상태가 변경되면 Angular가 자동으로 렌더링된 DOM을 갱신한다.

 

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

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

 

Angular 템플릿에 문자열 바인딩과 프로퍼티 바인딩, 이벤트 바인딩이 어떻게 사용되는지 예제를 보면서 확인

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

@Component ({
  selector: 'hello-world-bindings',
  templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
  fontColor = 'blue';
  sayHelloId = 1;
  canClick = false;
  message = 'Hello, World';

  sayMessage() {
    alert(this.message);
  }
}

<button
  type="button"
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>

<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>

<p>My color is {{ fontColor }}</p>

이중 중괄호({{, }})가  문자열을 바인딩하는 문법

대괄호([, ])가 컴포넌트 클래스에 있는 값을 프로퍼티나 어트리뷰트로 바인딩하는 문법

이벤트 문법은 소괄호((, ))

 

추가 가능으로 *ngIf(불린값으로 상태값 변경)와 *ngFor(포문으로 리스트만들기) 가 있다.