Angular Component

Component  - Angular 애플리케이션 구성 기본 단위 

 

• 화면을 렌더링하는 HTML Template
• 동작 정의 TypeScript Class
• Component를 Template에 추가할 때 사용하는 CSS Selector
• Component가 표시되는 모습을 정의하는 CSS 스타일

4가지로 구성된다.

---

 

Angular CLI로 컴포넌트 생성 방법

 

ng generate component <Component-name>

 

명령 실행시 컴포넌트 구성 

 

• 컴포넌트 이름으로 폴더가 생성
• <Component-name>.component.ts 컴포넌트 파일 생성
• <Component-name>.component.html 템플릿 파일 생성
• <Component-name>.component.css CSS 스타일 파일 생성
• <Component-name>.component.spec.ts 테스트 파일 생성

이렇게 만든 컴포넌트의 셀렉터는 <Component-name> 이다.

---

 

 

Component LifeCycle

 

LifeCycle Hooks ( 라이프싸이클 후킹 함수 )

 

• 컴포넌트 인스턴스는 생성된 시점부터 LifeCycle을 따라 동작한다.
• 컴포넌트가 동작하는 동안, 데이터 감지해 UI와 데이터를 갱신한다.
• 라이프싸이클은 인스턴스를 종료하고, DOM에서 템플릿을 제거할 때까지 이어진다.
• 디렉티브도 컴포넌트와 비슷한 LifeCycle을 따른다.
• LifeCycle hook method를 이용해, LifeCycle에 개입할 수 있다. (생성 시점, 데이터 변화 감지 시점 등)