컴포넌트(Component)
- View에서 사용할 애플리케이션 로직은 컴포넌트에 정의된다.
- View는 클래스의 프로퍼티와 메서드를 활용하여 클래스와 상호작용
컴포넌트 메타 데이터
| 속성 | 설명 |
|---|---|
| selector | 컴포넌트 인스턴스가 DOM 트리의 어떤 자리에 위치할지 CSS 셀렉터로 지정 |
| template | 컴포넌트의 |
| templateUrl | 컴포넌트의 HTML 템플릿을 외부 파일에 정의할 때, 이 템플릿 파일의 위치를 지정 |
| styles | 컴포넌트의 스타일을 인라인으로 구성 |
| styleUrls | 컴포넌트의 스타일을 외부 파일에 정의할 때, 이 스타일 파일의 위치를 지정 |
| providers | 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 프로바이더를 지정 |
템플릿과 뷰
- 컴포넌트의 뷰는 템플릿으로 정의하며, 템플릿이 화면에 렌더링되는 모양은 HTML 형식으로 정의
- 뷰는 보통 계층적으로 구성하며, 개발자가 원하는 대로 일부 영역만 조작 가능
- 템플릿은 컴포넌트의 최상위 뷰인 호스트 뷰에서 시작하므로, 또다른 뷰 계층을 구성하거나 다른 컴포넌트 뷰를 포함 가능
데이터 바인딩
- 컴포넌트는 뷰를 나타내기 위해 템플릿을 사용한다 이 때 컴포넌트와 템플릿의 데이터를 바인딩하는 기능이 존재한다.
- 이 기능은 부모와 자식 컴포넌트 간 데이터 교환에도 사용한다.
- 데이터를 바인딩 하는 3가지 방법이 존재한다.
-
Component → DOM
{{ value }} : 컴포넌트에 존재하는 프로퍼티 값을 DOM으로 전달
[property] = "value" : 부모 컴포넌트에서 자식 컴포넌트로 전달 -
Component ← DOM
(event) = "handler" : DOM에서 발생한 이벤트에 대한 handler를 component에서 정의 -
Component ↔ DOM
[(NgModel)] = "property" : 컴포넌트의 프로퍼티 값이 화면 입력 컨트롤에 반영되고, 수정되면 값을 갱신
컴포넌트 라이프 사이클
- 컴포넌트 인스턴스는 Angular가 컴포넌트 클래스의 인스턴스를 생성한 시점부터 미리 정의된 라이프싸이클을 따라 동작하며 라이프싸이클 단계에 따라 화면에 렌더링되고 자식 컴포넌트를 추가한다.
- Hooking method를 통해 동작하는 라이프사이클에 개입 가능
| metohd | 용도 | 실행 시점 |
|---|---|---|
| constructor | 컴포넌트는 class이므로 class 생성자가 가장 먼저 실행된다. | 클래스가 인스턴스를 생성할 때 |
| ngOnChanged | 바인딩된 입력 프로퍼티 값이 처음 설정되거나 변경될 때 | 컴포넌트의 입력 프로퍼티가 바인딩된 후 OnInit() 실행 전 한 번 실행하고 입력 프로퍼티가 변경될 때 마다 실행 |
| ngOnInit | 디렉티브나 컴포넌트에 바인딩된 입력 프로퍼티 값이 처음 할당된 후 실행 | ngOnChanged가 실행된 후 한 번 실행 ngOnInit 템플릿에 입력 프로퍼티가 연결되지 않아 ngOnChanged가 실행되지 않아도 실행 |
| ngDoCheck | Angular가 검출하지 못한 변화에 반응하거나, 변화를 감지하지 못하게 할 때 사용 | ngOnInit이 실행된 후 한 번 실행 ngOnChanged가 실행된 이 후 매번 실행 |
| ngAfterContentInit | 외부 컨텐츠를 컴포넌트나 디렉티브 뷰에 프로젝션한 이 후에 실행 | ngDoCheck가 처음 실행된 후 한 번 실행 |
| ngAfterContentChecked | 디렉티브나 컴포넌트에 프로젝션된 컨텐츠를 검사 후 | ngAfterContentInit이 실행된 후 ngDoCheck가 실행된 이 후 마다 실행 |
| ngOnDestroy | 디렉티브나 컴포넌트 인스턴스가 종료하기 전에 실행 | 메모리 누수를 방지하는 로직을 주로 사용 디렉티브나 컴포넌트 인스턴스를 종료하기 직전에 실행 |
