[Udemy Vue 완벽가이드 Section5] 66. Vue 앱 생명주기 - 이론, 실습

Vue는 상당히 정교한 생명주기를 가지고 있어, 코드를 실행해야 하는 시점이 언제든 해당 코드를 실행할 수 있다.

 

createApp으로 먼저 앱을 생성한다.

그리고 HTML 코드, 즉 DOM에 mount 메서드로 Vue가 앱을 어디에 렌더링할지 알 수 있도록 mount도 해준다.

 

앱을 생성하고 화면에 무언가 나타나기 시작할 때, 해당 앱이 몇 개의 지점에 도달한다.

이 지점은 생명주기 단계로, 메서드를 Vue앱 구성객체에 추가하여 해당 시점에서 실행해야하는 코드를 실행시킬 수 있다.

(하지만, methods 옵션에 추가하는 메서드와 같다는 건 아니다. methods에 추가하는 메서드는 스스로 호출하는 메서드거나, click과 같은 이벤트에 대해 호출하는 메서드이다.)

 

생명주기 훅 메서드는 Vue앱 구성객체 어느 곳에든 추가할 수 있다.

 

# 개발자도구에서 break point 설정

개발자도구에서 sources탭을 보면 활용할 기능이 하나 있다.

app.js파일에서 beforeCreate옆을 클릭하면, break point로 설정할 수 있다.

이렇게 break point를 설정하면, 해당 시점에서 코드실행이 잠깐 멈춘다.

 

 

1. beforeCreate()

- 첫 번째 생명주기단계.

- 앱이 완전히 초기화되기 이전에 호출된다.

- 위 break point 설정 후, 새로고침을 하면 화면에 아무것도 뜨지 않는다. 이 훅에서는 화면에서 아무것도 볼 수 없다.

2. created()

- created는 앱이 초기화가 시작된 이후 호출된다.

- 아직 마운트된 상태는 아니다. 그래서 이 시점까지는 화면에 표시되는 것이 아무것도 없다.

- created단계가 지나서야 Vue가 data 프로퍼티를 인식하고 일반 앱 구성에 대해서도 인지한다.

 

Compile template

- 이제부터 템플릿을 컴파일 할 수 있다.

- 모든 동적 플레이스 홀더와 보간 등이 제거된 후, 사용자에게 표시될 구체적인 값으로 대체되는 단계.

** 내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일한다.

이 템플릿 코드를 가상DOM을 생성하고 조작하기위해 JavaScript 코드로 컴파일한다.

- 그 다음 beforeMount 훅으로 간다.

 

3. beforeMount()

- Vue가 화면에 무언가 표시하기 직전 단계.

- 화면을 통해 볼 수 있게 되기 바로 직전 단계.

- 앱이 실제로 마운트되기 직전에  트리거된다.

- 이 훅까지는 화면에 아무것도 안보인다.

 

4. mounted()

- Vue앱이 화면에 mount된 상태.

- 화면에 무언가가 나타나기 시작.

- Vue앱이 초기화되고, template도 컴파일을 마쳤다. Vue가 화면에 표시할 대상을 인지하고, 브라우저에게 지시사항을 넘겨 브라우저가 이에 따라 Vue앱이 정의한 대로 모든 컨텐츠가 있는 HTML 요소를 추가한다.

- Mounted Vue instance : 이것으로 마운트된 Vue앱, 즉 마운트된 Vue 인스턴스가 완성.

 

 

# data에 대한 변경사항 발생 시의 훅 종류

대부분의 Vue앱에서는 data에 대한 변경사항이 발생한다. 그럴 때면 새로운 생명 주기 훅이 트리거된다.

beforeUpdate 훅, 그리고 updated 훅으로 이어진다.

 

input창에 값을 입력하고, 'Set Text'버튼을 누르면 beforeUpdate(), update()가 표시된다. 

 

5. beforeUpdate()

- Vue가 앱 내에서 업데이트를 완전히 처리하지 않았을 때에 대한 단계이므로, 화면에 변경된게 보이지 않는다.

 

6. updated()

- 해당 처리가 완료 되었을 때에 대한 단계.

- 해당 단계가 되면, 업데이트된 사항을 화면에서도 볼 수 있다.

다시 mounted 단계를 거칠 필요가 없다. template의 mount가 해제되지 않았으니 항상 화면에 표시되고 있다.

업데이트 이후에는 변경사항만 처리된 후, 화면에 렌더링된다.

 

 

 

 

# Vue앱의 마운트 해제 시

종종 Vue인스턴스(Vue앱)가 마운팅 해제(Unmounted)되는 경우가 있다.

앱의 mount가 해제되면 화면의 모든 컨텐츠가 삭제되며, 앱 사용이 불가하다.

 

app.mount 메서드와 같이, Vue앱을 제거할 수 있는 app.unmount 메서드가 있다.

setTimeout을 이용해서 타이머를 3초로 설정해보자. 앱이 생성 및 마운트되고 3초 후에 없어진다. 즉, 마운트를 해제한다.

setTimeout(function(){
 app.unmount();
}, 3000);

실제 애플리케이션에서 이 메서드를 호출하는 일은 거의 없다.

 

 

mount 해제 시에도 두 개의 생명주기 훅을 거친다.

 

7. beforeUnmount()

- 콘텐츠 삭제 직전에 실행되는 단계

- 여전해 앱을 볼 수 있다. 이 앱을 볼 수 있는 마지막 순간.

- 앱에 대한 작업을 할 수 있는 마지막 시점.

 

# unmounted()

- 컨텐츠 삭제 후, 실행되는 단계.

- Vue앱의 마운트된 템플릿 부분은 다 제거된다.

이 두 훅은 정리코드를 실행할 때 사용할 수 있으며, 서버에 HTTP 요청을 보내서 mount해제되는 앱을 추적하는 등, 필요한 작업을 수행할 수 있다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.