Angular 구성 요소의 수명 주기 및 다양한 방법 설명

Google에서 2009년에 출시한 Angular는 Typescript 프로그래밍 언어를 사용하는 JavaScript 개발 프레임워크입니다. 앱 개발을 위한 가장 인기 있는 디자인 프레임워크 중 하나입니다. Angular 프레임워크의 가장 좋은 점은 오픈 소스 애플리케이션이라는 것입니다. 개발자는 Angular 프레임워크를 사용하여 모바일 및 웹 애플리케이션을 만들고 데이터를 시각화합니다. Angular 개발의 경우 개발자는 Angular 수명 주기라고 하는 광범위한 프로세스를 따라야 합니다.

이 블로그는 Angular 라이프사이클과 다양한 후크 방법을 이해하는 데 도움이 됩니다.

Angular 라이프사이클이란 무엇입니까?

Angular 구성 요소를 실행하는 데 필요한 이벤트 주기를 Angular 수명 주기라고 합니다. Angular 구성 요소는 UI에 필요한 애플리케이션의 빌딩 블록입니다. 간단히 말해서 Angular 구성 요소는 Angular 응용 프로그램에서 화면의 패치를 제어하는 ​​블록입니다. 구성 요소는 선택기, 템플릿 및 스타일과 함께 다양한 속성으로 구성됩니다. 구성 요소는 처리를 위한 메타데이터도 필요합니다.

Angular는 수명 주기 동안 데이터 바인딩된 속성의 변경 사항을 추적하기 위해 다양한 변경 감지 단계를 거칩니다. Angular 수명 주기는 Angular가 구성 요소 클래스를 시작할 때 시작됩니다. 그런 다음 구성 요소의 보기와 하위 구성 요소의 보기를 정의합니다. 마지막으로 Angular는 더 이상 사용하지 않는 구성 요소를 파괴합니다. 또한 구성 요소를 인스턴스화한 후 다양한 후크 메서드를 호출합니다.

다양한 Angular 구성 요소 수명 주기 후크는 Angular 프레임워크에서 기능으로 사용됩니다. 각 후크 방법을 통해 개발자는 특정 이벤트 동안 다른 코드를 실행할 수 있습니다.

세계 최고의 대학에서 온라인으로 소프트웨어 개발 과정을 배우십시오. 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

Angular 구성 요소의 수명 주기

모든 Angular 구성 요소는 8개의 다른 단계로 구분되는 서로 다른 수명 주기를 갖습니다. 이러한 단계를 적용 시 별도로 사용할 수 있는 수명 주기 후크 이벤트라고 합니다. 라이프사이클이 시작되기 전에 컴포넌트 클래스의 생성자를 실행하면 다양한 후크 이벤트가 발생합니다. Angular 라이프사이클의 후크 이벤트는 두 가지 주요 범주로 나뉩니다. 한 단계는 원래 구성 요소에 연결되고 두 번째 단계는 해당 특정 구성 요소의 자식과 관련됩니다.

Angular 라이프사이클의 다양한 단계를 이해합시다.

• ngOnChanges:- ngOnChanges() 이벤트는 구성 요소 내에서 입력 컨트롤의 값을 변경하고 구성 요소의 바인딩된 속성이 변경될 때 발생합니다. 간단히 말해서 이 후크 메서드는 Angular가 구성 요소의 인바운드 속성을 설정하거나 재설정할 때마다 발생합니다. 이 과정에서 현재 및 이전 속성 값에 대한 'SimpleCharge' 개체가 수신됩니다.
  이 후크 메서드는 현재 및 이전 속성 값의 변경된 데이터 맵을 받습니다. 데이터 맵은 SimpleCharge로 래핑됩니다. 이 이벤트가 매우 자주 발생한다는 것을 기억하는 것이 적절합니다. 따라서 이벤트 중 변경을 수행하는 경우 성능에 큰 영향을 줄 수 있으므로 각별히 주의해야 합니다. 구성 요소에 바인딩된 입력이 있고 구성 요소의 바인딩된 속성을 변경하는 경우에만 이 후크 메서드를 사용해야 합니다. 따라서 일반적으로 콜백 메서드로 처리됩니다.
• ngOnInit:- 이 이벤트는 구성 요소의 데이터를 초기화하는 데 사용됩니다. ngOnInit()는 데이터 바인딩된 속성이 Angular에 의해 표시되고 입력 속성이 구성 요소에 의해 설정되면 구성 요소 또는 지시문을 초기화합니다. ngOnInit()의 주요 목적은 복잡한 초기화를 수행하는 것입니다. 후크 메서드는 먼저 구성 요소를 사용하여 초기 데이터 또는 로컬 변수를 간단한 값으로 소싱합니다. 그런 다음 Angular가 입력 속성을 설정하면 구성 요소를 설정하는 데 사용됩니다. 구성 요소에 바인딩된 속성이 있는 경우 ngOnInit() 이벤트는 일반적으로 ngOnChanges 후에 호출됩니다. 그러나 구성 요소에 바인딩된 속성이 포함되어 있지 않으면 ngOnInit() 이벤트를 직접 실행할 수 있습니다. 또한 이 후크는 한 번만 호출된다는 점을 기억해야 합니다.
• ngDoCheck:- 이 후크 이벤트는 입력 방법의 속성을 확인할 때마다 발생합니다. ngDoCheck 이벤트는 각 변경 감지 주기의 필수적인 부분이며 고유한 논리 검사와 함께 사용할 수 있습니다. 이 이벤트는 구성 요소에서 사용자 지정 변경 사항 또는 알고리즘을 쉽게 감지합니다. ngDoCheck book 메소드를 사용하면 Angular가 감지할 수 없는 변경 사항을 감지할 수 있습니다. 모든 변경 감지 실행에 대해 ngOnChanges 후에 ngDoCheck를 호출할 수 있습니다. 구성 요소의 바인딩된 속성이 변경되지 않은 경우에도 첫 번째 실행에서 ngOnInit 이후에 트리거될 수 있습니다.
  
• ngAfterContentInit:- 이 후크 단계 또는 수명 주기 메서드는 구성 요소의 수명 동안 한 번만 발생하므로 ngOnInit와 유사합니다. 구성 요소의 바인딩을 처음 확인해야 할 때 이 이벤트를 한 번만 트리거할 수 있습니다. Angular가 구성 요소 내에서 콘텐츠 프로젝션 활동을 수행한 후 이 이벤트를 실행합니다. 간단히 말해서 ngAfterContentInit는 Angular에 의해 구성 요소의 뷰 또는 지시문이 있는 뷰에 외부 콘텐츠가 투영될 때 실행됩니다. ngAfterContentInit는 ngDoCheck 메서드를 실행한 직후에 Angular가 호출됩니다. 이 수명 주기 메서드는 자식 구성 요소의 초기화와 관련이 있습니다.
  
• ngAfterContentChecked:- 이 후크 단계는 ngDoCheck 메서드에 대한 후속 작업입니다. 이름에서 알 수 있듯이 ngAfterContentChecked 메서드는 Angular가 구성 요소 내에 투영된 외부 콘텐츠의 변경 사항을 감지한 후 실행됩니다. 이 이벤트는 모든 변경 감지 주기 후에 발생합니다. ngAfterContentInit() 및 모든 후속 ngDoCheck() 이후에 호출됩니다. ngAfterContentInit와 마찬가지로 ngAfterContentChecked도 자식 구성 요소 초기화와 연결됩니다.
  
• ngAfterViewInit:- ngAfterViewInit는 구성 요소 보기의 초기화가 완료된 후 트리거됩니다. ngAfterContentChecked() 수명 주기 메서드 이후에 한 번만 호출됩니다. 이 후크 메서드는 구성 요소에만 사용되며 자식 구성 요소에는 사용되지 않습니다.
  

  소프트웨어 엔지니어링에 대한 인기 코스 및 기사

  인기 프로그램
  소프트웨어 개발의 이그 제 큐 티브 PG 프로그램 - IIIT B	블록체인 인증 프로그램 - PURDUE	사이버 보안 인증 프로그램 - PURDUE	컴퓨터 과학 석사 - IIIT B
  기타 인기 기사
  미국의 클라우드 엔지니어 급여 2021-22	미국의 AWS 솔루션 아키텍트 급여	미국의 백엔드 개발자 급여	미국의 프론트엔드 개발자 급여
  미국 웹 개발자 급여	2022년 스크럼 마스터 인터뷰 질문	2022년 사이버 보안 분야에서 경력을 시작하는 방법은 무엇입니까?	공학도를 위한 미국에서의 직업 선택

• ngAfterViewChecked:- 이 수명 주기는 Angular가 구성 요소 또는 하위 구성 요소의 감지 또는 확인 보기를 완료하면 호출됩니다. ngAfterViewChecked 메서드는 ngAfterViewInit 메서드 이후에 호출되지만 이후의 모든 ngAfterContentChecked() 수명 주기 단계 이후에 실행됩니다. 이 후크 방법은 각도 구성 요소에만 관련됩니다 .
  
• ngOnDestroy:- ngOnDestroy() 후크 메서드는 Angular가 더 이상 필요하지 않은 구성 요소를 파괴하기 전에 실행됩니다. 이 수명 주기 메서드는 이벤트를 분리하고 메모리 누수를 방지하는 데 도움이 됩니다. 또한 Observable을 구독 취소합니다. 구성 요소를 제거하기 전에 이 이벤트를 한 번만 호출합니다. 이 후크 메서드는 Angular가 구성 요소를 파괴하기 전에 정리 역할을 합니다.

Angular 라이프사이클의 인터페이스

Angular 라이프사이클은 일반적으로 구성 요소 클래스를 통해 정의됩니다. 그러나 다양한 후크 메서드에 이미 연결된 Typescript 인터페이스가 있으므로 인터페이스를 사용하여 Angular 구성 요소 클래스를 정의할 수도 있습니다. 우리는 일반적으로 인터페이스를 다양한 메서드 및 관련 속성을 식별하는 데 도움이 되는 특성으로 이해합니다. 불필요하지만 Angular 라이프사이클에서 인터페이스를 구현하는 것이 좋습니다. 각 인터페이스의 목적은 후크 메서드의 프로토타입을 정의하는 것입니다. 인터페이스 이름은 접두사 'ng'로 지정됩니다.

결론

Angular 구성 요소는 typescript 프로그래밍을 기반으로 합니다. 따라서 각도 수명 주기 후크 메서드를 구현하기 전에 타입스크립트 프로그래밍의 기본 사항을 알아야 합니다. Angular 앱 디자인의 기초, 라이프사이클 방식의 프로세스, 그리고 어떤 hook 방식을 사용해야 하는지 노하우를 배우는 것도 필수적입니다.

Angular 앱 개발 분야에서 경력을 쌓을 계획이라면 전체 프로세스와 다양한 후크 메서드의 기능에 대한 심층적인 지식이 있어야 합니다. 또한 Angular는 자바스크립트 개발 프레임워크이므로 자바 프로그래밍 언어를 배워야 합니다. upGrad의 소프트웨어 개발 이그 제 큐 티브 PG 프로그램 은 Angular 앱 개발에 대해 처음부터 배울 수있는 훌륭한 옵션입니다.