Angular | LifeCycle

kihyeon8949·2020년 8월 16일
3

Angular

목록 보기
4/4
post-thumbnail

생명주기

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에서 수행하는 것이 좋습니다.

  • ngAfterViewInit

컴포넌트의 View와 ViewChild가 초기화된 이후 호출됩니다.
HTML에 작성된 내용이 화면에 모두 출력되고나서 호출되며 해당 컴포넌트에서만 동작합니다.

예를 들어 부모 컴포넌트로부터 프로퍼티 바인딩으로 받은 속성 a를 템플릿에서 뷰로 노출하도록 구현했을 때, ngAfterViewInit이 호출 될 때 a 속성은 부모 컴포넌트로부터 전달됐음을 보장하고 렌더링 됐다는 것도 보장.

  • ngOnDestroy

컴포넌트나 디렉티브가 소멸하기 이전에 호출됩니다. RxJS의 unsubscribe() 메소드와 같이 메모리 누수 등을 방지하기 위한 내용들을 정의합니다.

인터페이스

@ViewChild, @ViewChildren

접근 제한자(Access modifier)

typescript에서 private, public

객체지향적으로 JavaScript를 사용하게 되면 은닉화가 어렵다. JavaScript에서는 접근 제한자를 지원하지 않기 때문에 기본적으로 프로퍼티에 대해 접근을 막을 수는 없다. 하지만 TypeScript는 접근 제한자를 제공하기 때문에 이 문제를 해결할 수 있다.

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

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

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

profile
함께 일하고 싶은 개발자를 목표로 매일을 노력하고, 옷을 좋아하는 권기현 입니다.

0개의 댓글