앵귤러 기초(Angular basic) 15.생명주기(lifecycle), hook

앵귤러 생명주기(lifecycle)와 훅(hook)에 대해 알아보겠습니다.

 

이번 포스트에선 아래의 내용을 다루고 있습니다.

1. 생명주기(lifecycle)
2. OnInit
3. OnChanges
4. OnDestroy

---

구성 요소에는 Angular에서 관리하는 라이프사이클이 있습니다.

Angular는 1.컴포넌트를 생성하고 2.렌더링하고 3.하위 컴포넌트를 만들고 렌더링하며 4.데이터 바인딩 속성이 변경될 때 변경사항을 처리한 다음 5.DOM에서 해당 템플릿을 제거하기 전에 삭제합니다.

 

Angular는 이 라이프사이클을 활용하고 필요에 따라 작업을 수행하는 데 사용할 수 있는 일련의 라이프사이클 훅(hook)을 제공합니다.

 

Lifecycle hook

라이프 사이클 hook는 Angular에서 제공하는 인터페이스입니다.

(인터페이스의 감이 안 오시는 분들은 이쪽 포스트를 참고해 주세요.)

라이프사이클 hook 인터페이스를 구현 함으로 컴포넌트의 라이프사이클 이벤트가 발생할 때 실행되는 코드를 만들 수 있습니다.

 

예를 들어,  컴포넌트가 처음 생성되고 초기화될 때 페이지에 대한 데이터를 가져오고 싶을 수 있습니다.

그럴 경우 OnInit 라이프사이클 훅을 구현하여 코드를 작성하면 초기화 컴포넌트가 초기화 될 때 데이터를 가져올 수 있습니다.

 

이 포스트는 앵귤러의 기초를 다루는 포스트이기 때문에 가장 일반적으로 사용되는 세 가지 라이프사이클 훅에 대해 얘기 해 보겠습니다.

 

OnInit

Angular가 데이터 바인딩 속성을 초기화한 후 OnInit이 호출됩니다.

이 hook를 사용하여 주로 컴포넌트의 초기화를 수행합니다.

OnInit은 백엔드 서비스에서 템플릿 데이터를 검색할 수 있는 좋은 생명주기 입니다.

예를 들어 화면에 출력할 데이터를 db에서 가져온 후 화면에 출력하는 과정에서 많이 사용됩니다.

 

OnChanges

Angular가 데이터바인딩된 input property의 값이 바뀌면 OnChanges가 호출됩니다.

Input propery는 차후에 다룰 예정이지만 데이터가 바뀔 때마다 해야할 처리에 유용합니다.

예를 들면 유효값 체크 같은 처리를 일수 있겠네요.

 

OnDestroy

Angular가 컴포넌트를 파괴하기 전에 OnDestroy가 호출 됩니다.

이 라이프사이클 훅은 주로 컴포넌트의 정리에 이용됩니다.

예를 들어 현재 컴포넌트에서 쓰고있는 메모리의 정리, 특정 변수의 초기화 등을 할 수 있습니다.

---

코드로 살펴보겠습니다.

라이프 사이클 훅을 사용하기 위해 라이프사이클 훅 인터페이스를 구현해야 합니다..

위 예는 앵귤러의 OnInit 인터페이스를 사용하고 있습니다.

OnInit을 쓰기 위해서 import하는 것도 잊지 말아주세요.

 

Import까지 넣어주면 훅 메소드를 쓸수 있습니다.

각 라이프사이클 훅 인터페이스는 하나의 메소드를 정의하고 있으며,  Angular의 인터페이스이름 앞에 ng가 붙은 형식의 메소드 이름 입니다.

예를 들어 OnInit 인터페이스 훅 메서드의 이름은 ngOnInit입니다.

MovieListComponent에서 OnInit 라이프사이클 훅을 컴포넌트에 추가해 보겠습니다.

클래스 서명에 인터페이스를 추가하였고, OnInit import도 하였습니다.

그런데 컴포넌트 클래스명에 빨간줄로 에러를 표시하고 있습니다.

에러 메시지에서 알 수 있듯이 인터페이스를 구현했으니 해당 인터페이스의 모든 속성과 메소드에 대한 코드를 작성해야 합니다.

OnInit 인터페이스는 ngOnInit라는 하나의 메서드만 정의하고 있으므로 ngOnInit 메서드에 대한 코드를 작성해야 합니다.

 

아직은 OnInit에 특별한 작업을 할 필요가 없으므로 console.log를 사용하여 메시지를 콘솔에 기록해 보겠습니다.

 

브라우저의 개발자 도구의 콘솔에서 메시지를 확인해 보겠습니다.

메시지가 잘 나오네요.🎉

 

지금은 기초적인 단계를 다뤘지만, 애플리케이션의 규모가 커질수록 라이프 사이클 훅에서 다양한 일을 할 경우가 많이 생깁니다.

우선은  Oninit, OnChange, OnDestroy부터 천천히 친해져 보세요.

사실 위의 세가지 훅을 가장 많이 쓰이고 강력합니다.

이것으로 라이프사이클 훅에 대해 알아봤습니다.

 

다음 포스트에선 커스텀파이프를 만드는 내용을 다루겠습니다.