앵귤러의 구성 요소

⇒ 구성요소를 잘 정리해주신 블로그가 있어서 이것을 분석해보기로 함!

모르는 단어들이나 문법들이 많아서 분석하면서 그때 그때 마다 배우고 공부해야 할듯하다

3가지로 구분 됨

• 타입 스크립트 클래스
• html 템플릿
• css 스타일

📁src/app/hello/hello.component.ts

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

@Component({
selector: 'app-root',
template: Hello ,
styles: :host { color: blue; } ,
standalone: true,
})
export class AppComponent {}

-import

컴포넌트에 필요한 의존모듈을 import합니다. Angular모듈의 경우 @가 붙어있고 경로를 명시하지 않습니다. npm도 경로를 명시하지 않으며 나머지는 상대경로를 명시해야 합니다.

-@component

@Component 데코레이터

는 컴포넌트 생성에 필요한 메타데이터 객체를 전달합니다.

@Component 데코레이터는 자신의 아래에 있는 클래스를 컴포넌트 클래스로 인식하기 때문에 @Component 데코레이터와 컴포넌트 클래스 사이에는 아무것도 없어야 합니다.

Q. 데코레이터가 뭐지?

함수나 메서드에 적용되어, 해당 함수나 메서드의 기능을 확장 하거나 변경하는 역할을 합니다.

데코레이터는 일반적으로 @ 기호와 함께 사용되며, 함수 또는 메서드 위에 위치 합니다.

데코레이터는 기본적으로 함수를 인자로 받고, 또 다른 함수를 반환하는 고차 함수 입니다.

selector

html에 작성할 태그 이름으로 컴포넌트의 뷰를 표현할 때 사용합니다. 이름을 지을때는 다른 애플리케이션과의 충돌을 막기 위해서 app접두사가 자동으로 붙습니다. 접두사 변경은 프로젝트를 생성할때 --prefix 옵션을 추가하면 됩니다. 기본적으로 angular.json 파일에서 app이 디폴트 설정 되어있는 것을 확인할 수 있습니다.

✔️template/templateUrl 프로퍼티

컴포넌트의 뷰를 선언하는 프로퍼티입니다.

관리할 뷰가 복잡하지 않다면 template을 사용하여 ` (백틱) 으로 감싼 코드를 작성하여 생성합니다. 뷰가 간단하지 않다면 templateUrl에 사용할 html 템플릿의 경로를 적어줍니다.

✔️styles/styleUrls 프로퍼티

위에서 선언한 뷰의 스타일을 지정하기 위한 프로퍼티 입니다.

styleUrls에는 외부 CSS파일의 상대경로를 배열로 지정해 여러개의 스타일 파일을 적용할 수 있습니다. styles을 이용하여 외부 파일을 이용하지 않고 바로 문자열의 형태로 작성할 수도 있습니다.

Q.프로포티란?

어떤 객체가 가지고 있는 항목들을 프로퍼티라고 합니다.

한국어로는 속성 이라고 부릅니다.

✅export class

뷰를 관리하기 위한 로직을 담고있는 컴포넌트 클래스를 정의합니다. 컴포넌트의 뷰 관리를 하는것이며 애플리케이션 공통 관심사는 서비스로 분리합니다.

구성요소 클래스 업데이트

augular 에서 구성요소의 논리와 동작은 구성요소의 타입스크립트 클래스에 정의 됩니다.

[1] city 라는 속성을 추가합니다.

city 클래스에 호출된 속성을 추가하여 구성요소 클래스를 업데이트 합니다.