본문 바로가기

프레임워크/Angular

LifeCycle

* 영어표기가 디폴트, 이하 한글표기

* Angular 기준


 

Lifecycle, 생명주기

- 각각의 Component 와 Directive 는 라이프사이클을 갖는다.

- 생성부터 소멸까지의 과정을 일컫는다.

- 특정 시점에서 어떤 메서드를 실행하기 위해 라이프 사이클의 hook 을 이용한다.

 

왜 알아야 할까요?

- 라이프 사이클은 이런 구조인데

- 각 시점에서 어떤 문제가 발생하는지. 빠르게 오류를 찾아낼 수 있다.

- 나는 이게 참 햇갈렸는데. 결론은 초기화 문제였지만... 순서는 무척 중요하다. 다음에는 먼저 체크하고 시작하자.

1). constructor :

     뼈대, 가장 먼저 세워짐

     Angular 가 아닌, Javascript 엔진 저쩌구... 의존성 주입을 위해. 사용해야함!

2). ngOnchanges :

     변화를 감지하면 발동, 새 컴포넌트가 시작될 때 바로 시작됨. 바인딩 된 속성이 바뀔때마다 항상 호출

3). ngOnInit :

     컴포넌트가 초기화 되면 호출, 여기에서 속성 초기화 권장됨. 딱 한번 호출됨

4). ngDocheck

     변화가 감지되면 계속 체크됨. 일머리가 좋지만. 계속 변화를 감지하기 때문에 성능저하 주의

     4-1). ngAfterContentInit

     4-2). AfterContentCheckedng

 5). ngAfterViewInit

     해당하는 자신의 컴포넌트 뷰 초기화가 완료되면 도달

     5-1). AfterViewInitng

     5-2). AfterViewChecked

6). ngOnDestroy

     컴포넌트 소멸 직전에 호출

 

'프레임워크 > Angular' 카테고리의 다른 글

material 사용하기  (0) 2022.10.05
Apex Chart  (0) 2022.09.20
객체지향_1, Class, Object, Instance  (0) 2022.09.20
CreatComponent  (0) 2022.09.16
Angular 에 그래프 삽입하기  (0) 2022.08.31