Angular | LifeCycle

권기현·2020년 8월 16일

Angular

목록 보기

4/4

생명주기

Angular 에서는 컴포넌트와 디렉티브를 생성하여 소멸하기까지의 과정을 말한다.

Angular에서는 다음의 순서대로 생명주기를 관리합니다.

1. 앵귤러의 라이프사이클

흰 부분과 검은 부분이 있습니다.
이는 ※ 디렉티브 생명주기 훅 메소드와 관련되어 있습니다.

디렉티브 생명주기 훅 메소드
디렉티브도 컴포넌트와 동일한 생명주기 훅 메소드를 사용합니다. 하지만 디렉티브에는 뷰가 없기 때문에 뷰와 관련된 생명주기인 ngAfterViewInit, ngAfterViewChecked, ngAfterContentInit, ngAfterContentChecked 메소드는 디렉티브에 존재하지 않습니다.

2. 생명주기 훅 메소드

생명주기 훅(Hook)메소드(ng-)는 인터페이스의 형태로 제공됩니다. 모든 생명주기 훅 메소드를 구현할 필요는 없으며, 특정 생명주기에 대해 구현해야할 기능이 있을 때 필요한 해당 훅 메소드를 구현하면 됩니다. 각각의 생명주기 훅 메소드에 대해 알아보겠습니다.

출처: https://freestrokes.tistory.com/96 [FREESTROKES DEVLOG]

-리액트의 라이프사이클

-리액트와 앵귤러 라이프사이클 비교

Constructor, ngOnInit?

props 주입, 초기화 단계에서 constructor(), ngOnInit()이 있는데 이 둘의 차이는 constructor 메소드는 클래스 자체의 기능지만 반면 ngOnInit()은 앵귤러의 기능이라는 것이다.

때문에 constructor가 호출될 때는 앵귤러의 컨트롤을 벗어난다.
이 의미는, 앵귤러가 컴포넌트 초기화를 마쳤는지 알기에는 적당한 위치가 아니다.

그렇다면, constructor은 쓰지 말아야하는가?
왜 constructor를 사용할 수 있는데도 생애주기 훅인 ngOnInit을 사용해야 할까?

- Constructor 용도
생애주기 훅을 사용해야 하는 경우도 있지만 constructor를 사용해야 적합한 시나리오도 있다. 이 생성자는 의존적인 코드를 컴포넌트에 전달하는 의존성 주입을 하기 위해서는 필수적으로 필요하다.

constructor는 자바스크립트 엔진에 의해 초기화 되는데 타입스크립트에서는 Angular에 의존성이 어느 프로퍼티에 적용되는지 직접 지정 안하고도 사용할 수 있다.

- ngOnInit
ngOnInit은 순수하게 Angular가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재한다.

👉 contructor에서는 의존성 주입에 대한 작업을 하고, 변수 초기화 작업은 ngOnInit()에서 하도록하자.

참고

자주 사용되는 라이프 사이클

ngOnChanges
- 컴포넌트 구현에 따라 초기에 선택적으로 호출되는 생명 주기
- 부모 컴포넌트에서 자식 컴포넌트의 입력 프로퍼티(@Input 데코레이터 가 적용된 프로퍼티)에 바인딩한 값이 초기화 또는 변경되었을 때 호출됩니다.
- ngOnInit 호출 이전에 최소 1회 호출되며 이후 입력 프로퍼티가 변경될 때마다 호출됩니다.
따로 프로퍼티를 등록하거나 하는건 없는 것 같다.

ngOnInit

ngOnChanges 메소드 동작 이후 입력 프로퍼티를 포함한 모든 프로퍼티의 초기화가 완료된 시점에 한 번만 호출됩니다. 일반적으로 프로퍼티의 초기화는 TypeScript에서는 constructor에서 하는 것이 일반적이지만 Angular에서는 ngOnInit에서 수행하는 것이 좋습니다.