컴포넌트 개념
- 컴포넌트는 뷰(View)를 구성한다.
- 컴포넌트에서 정의한 뷰에서 사용될 로직또한 컴포넌트에 정의한다.
- 뷰는 클래스의 프로퍼티와 메소드를 활용하여 클래스와 상호작용을 한다. (클래스는 컴포넌트 클래스를 의미)
메타데이터 속성 (@Component({})
| changeDetection |
해당 컴포넌트에 사용할 변경 감지 방식을 정한다. |
| viewProviders |
뷰 자식 DOM 에게 표시할 개체 집합을 정의한다. |
| moduleId |
컴포넌트를 포함하는 모듈의 모듈 ID입니다. 컴포넌트는 템플릿 및 스타일에 대한 상대 URL을 확인해야 한다. |
| templateUrl |
Angular 컴포넌트에 대한 템플릿 파일의 상대 경로 혹은 절대 URL이다. |
| template |
Angular 컴포넌트에 대한 인라인 템플릿 HTML 스트링을 넣는다. |
| styleUrls |
해당 컴포넌트에서 사용할 하나 이상의 CSS 파일의 상대 혹은 절대 경로입니다. |
| styles |
인라인 CSS 스트링을 기입한다. |
| animations |
Angular에서 자체적으로 제공하는 애니메이션을 하나 이상 넣는다. state(), transitions() 와 같은 요소들이다. |
| encapsulation |
템플릿 및 css 스타일에 대한 캡슐화 정책이다.
|
| interpolation |
Overrides the default encapsulation start and end delimiters ({{ and }}) |
| entryComponents |
현재 컴포넌트와 함께 컴파일해야 하는 컴포넌트 집합을 정의한다. 해당 속성에 나열된 컴포넌트에대해서 Angular는 ComponentFactory를 생성하고 그것을 ComponentFactoryResolver에 저장한다. |
| preserveWhitespaces |
컴파일 된 템플릿에서 잠재적으로 불필요한 공백 문제를 제거하려면 True, 아니면 false를 둔다. 기본적으로 삭제되는 공백문자는 javascript 정규식에서 \s 에 부합되는 문자들이다. 기본값은 false다. |
뷰 계층구조
- 뷰는 보통 계층적으로 구성하는데 이는 개발자가 원하는 대로 일부 영역만 조작할 수 있다.
- 템플릿은 최상위 뷰인 호스트 뷰에서 시작한다.
- 뷰 안에서 또 다른 뷰 계층을 구성할 수 있고, 다른 컴포넌트의 뷰를 포함시길 수도 있다.
- 뷰는 일반적으로 같은 NgModule에 있는 컴포넌트를 활용하여 뷰 계층을 구성한다. 특수한 상황에서는 다른 NgModule에 있는 컴포넌트를 뷰에 불러올 수도 있다.
템플릿
- 템플릿은 HTML의 문법과 비슷하며 Angular에서 제공하는 템플릿 문법을 추가적으로 사용할 수 있다.
- 이는 Angular 이전 버전에서 제공하는 directive의 개념과 비슷하다. (Angular에도 directive가 있다.)
데이터 바인딩
- 데이터 바인딩이란 템플릿과 컴포넌트 상 데이터 즉 값을 연결하는 것이다.
- 일반적으로는 템플릿(DOM)에서의 어떤 이벤트를 통해 값을 컨트롤러에 전달하거나,
컨트롤러에서 변경된 값을 DOM에 반영하는 식의 단방향 데이터 바인딩을 사용한다.
데이터 바인딩 종류
<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>- 문자열 바인딩 - {{컴포넌트에 정의된 프로퍼티 값}}
- 프로퍼티 바인딩 - [바인딩할 속성 값]
- 이벤트 바인딩 - (바인딩할 이벤트 속성 값)
양방향 데이터 바인딩
<input [(ngModel)]="hero.name">- 위와 같이 사용하여 양방향 데이터 바인딩을 사용할 수 있다.
- 데이터 바인딩은 부모 자식 컴포넌트간 데이터를 주고 받을 때도 사용되니 중요하다.
파이프
- 파이프를 사용하면 View 단에서 값이 사용자에게 보여지는 형식을 변경할 수 있다. (시간 형식, 통화 형식, 단위)
개인 의견
- 양방향 데이터 바인딩은 Angularjs 때와 마찬가지로 많은 리소스를 차지할 것 같아서 사용을 최대한 자제하는 게 좋을 것 같다.
- Angular의 기본 개념에 대해서 배워가면서 느끼는 것은 컴포넌트의 계층 구조를 잘 설계하고 진행하지 않으면 정말 큰일날 것 같다.
'Study > Angular' 카테고리의 다른 글
| [정리] Angular Module 역할적 개념으로 모듈 분리 (0) | 2020.09.21 |
|---|---|
| [개념] Angular NgModule (0) | 2020.09.09 |
| [개념] Angular 프레임 워크 컨셉 (0) | 2020.09.08 |
