컴포넌트는 앵플을 구성하는 기본단위
컴포넌트는 아래 구성요소들로 이루어진다
- 화면을 랜더링하는 HTML템플릿
- 동작을 정의하는 타입스크립트 클래스
- 컴포넌트가 사용될 템플릿을 태그이름(CSS셀렉터)
- HTML템플릿내 요소노드들의 CSS스타일
라이프싸이클 후킹 함수
컴포넌트 인스턴스는 컴포넌트 클래스 인스턴스가 생성된 시점부터 미리 정의된 라이프사이클을따라 동작하며, 화면에 랜더링되고 , 자식 컴포넌트를 화면에 추가한다.
컴포넌트가 동작하는 동안 프로퍼티 바인딩된 데이터가 변경되었는지 감지하고 값이 변경되면 화면과 컴포넌트에있는 데이터를 갱신하기도 한다.
라이프사이클은 컴포넌트 인스턴스가 소멸되고 DOM에서 제거될때까지 이어진다. (디렉티브오 컴포넌트와 같은 라이프사이클을 따른다)
앵플에서 라이프사이클 후킹메소드를 사용하면 컴포넌트가 동작하는 라이프사이클에 개입할 수 있다.
그래서 컴포넌트 인스턴스가 생성되는 시점, 데이터변화가 감지하는 시점, 데이터변화가 감지된 이후 시점, 인스턴스가 종료되는 시점에서 원하는 동작을 할 수 있다.
라이프싸이클 이벤트에 반응하기
앵귤러 Core라이브러리의 라이프사이클 후킹 인터페이스 정의된 메소드를 컴포넌트 클래스에 구현하면 해당 라이프사이클 이벤트에 반응할 수 있다.
따라서 컴포넌트 인스턴스를 초기화하고 갱신하며 종료하는 시점에 원하는 동작을 수행할 수있다.
메소드의 이름은 후킹 인터페이스 이름에 ng접두사를 붙이면 된다.
OnInit인터페이스는 ngOnInit()메소드를 구현하면 된다.
ngOnInit()메소드는 앵귤러가 입력프로퍼티를 감사한 직후 호출되기때문에 인스턴스 초기화로직을 작성하면 된다.
라이프싸이클 이벤트 순서
앵플이 컴포넌트 클래스 생성자를 실행하면서 인스턴스를 초기화하고 나면 정해진 시점에 라이프사이클메소가 호출된다.
ngOnChanges()
Input데코레이터로 컴포넌트 프로퍼티에 값을 입력받을때 ngOnInit()이 실행되기전 한번 실행되며 입력프로퍼티로 바인딩된 값이 변경될때마다 호출된다.
<app-test [arg]="app_val"></app-test> ngOnChanges(changes:SimpleChanges){
for (const propName in changes) {
const chng = changes[propName];
const cur = JSON.stringify(chng.currentValue);
const prev = JSON.stringify(chng.previousValue);
console.log(`${propName}: currentValue = ${chng.currentValue}, previousValue = ${prev}`);
}
}컴포넌트에 바인딩하여 값을 전달할경우 바인딩값이 변할때마다 이 메소드는 자주 호출되기때문에 여기에 복잡한 로직을 사용하지 않아야 한다.
ngOnInit()
컴포넌트에 입력데코레이터값이 처음 할당된후 한 번 호출된다. 입력데코레이터가 없는 경우에도 호출된다.
ngAfterViewInit()
Angular가 컴포넌트나 디렉티브 화면과 자식 컴포넌트 화면을 초기화한 후에 실행된다.
ngOnDestroy()
Angular가 디렉티브나 컴포넌트 인스턴스를 종료하기 전에 실행된다.
이 메서드는 옵저버블을 구독 해지하거나 이벤트 핸들러를 제거하는 등 메모리 누수를 방지하는 로직을 작성하는 용도로 사용한다.
이외에도 여러가지 이벤트가 있으니 참고할 것
