[Vue] life cycle

Vue life cycle

Vue.js 라이프사이클은 Vue 인스턴스가 생성되는 것부터 인스턴스가 소멸되는 것까지의 과정입니다. 

 

Vue 라이프 사이클이 실행되는 경우는 다음과 같습니다.

- Vue 인스턴스가 생성돼서 DOM에 마운트되는 경우

- 데이터가 변경되서 DOM을 업데이트하는 경우

 

 Vue.js 라이프 사이클은 여러 단계가 정의되어 있습니다. 그리고 각 단계마다 사용자가 정의한 로직을 실행하는 주체가 있습니다. 이를 '훅'이라고 합니다. Vue.js 공식문서에서는 '인스턴스 라이프사이클 훅'이라고 정의하고 있습니다.

 

인스턴스 라이프사이클 훅

Vue.js 라이프 사이클은 여러 단계를 순서대로 실행합니다. 각 단계마다 호출되는 훅이 있습니다. 주요 훅은 created, mounted, updated, destroyed가 있고, 이를 포함해서 총 8개의 인스턴스 라이프사이클 훅이 있습니다. 

 

주요 훅에 대해서 알아보겠습니다.

created

- 컴포넌트의 Data와 Method를 사용할 수 있습니다.

- DOM에 접근하는 로직을 사용할 수 없습니다.

 

저희 제품에서 가장 많이 사용되는 훅입니다. 컴포넌트의 Vue 인스턴스가 만들어지는 시점에 실행이 되는 훅입니다. 쉽게 말해서, 라이프 사이클 훅 중에서 가장 먼저 사용자 정의 로직을 실행해 주는 훅입니다. 

 

created 훅에서는 컴포넌트의 data에 접근할 수 있기 때문에, created 시점에 HTTP GET요청을 통해서 받아온 데이터를 컴포넌트의 data에 초기값으로 설정하는 방식을 많이 사용합니다. 제품에서도 created 단계에서 HTTP GET요청을 통해서 받아온 데이터로 컴포넌트의 data를 초기화해 줄 목적으로 많이 사용하고 있습니다.

 

아래의 코드는 저희 제품에서 최상위 컴포넌트인 App.vue파일에서 created() 훅의 로직입니다. 

제품이 실행되면 가장 먼저 최상위 컴포넌트의 created가 실행됩니다.

HTTP GET요청 함수들을 통해서 '멤버 목록'과 '버전 정보' 그리고 'plugin 정보'를 우선적으로 받아오도록 정의되어 있습니다.

 

 

 

mounted

- 컴포넌트의 Data와 Method를 사용할 수 있습니다.

- DOM에 접근하는 로직을 사용할 수 있습니다.

- 모든 컴포넌트가 마운트된 상태를 보장하지는 않습니다.

 

mounted훅은 새로운 컴포넌트가 DOM에 추가가 되고 난 후에 실행되는 훅입니다.

 

컴포넌트 간에 계층 관계가 있을 경우에 created와 반대로, mounted 훅은 자식 컴포넌트가 부모 컴포넌트보다 먼저 실행됩니다. 

아래 그림은 부모 컴포넌트와 자식 컴포넌트 간에 created 훅과 mounted 훅의 실행 시점을 표시한 그림입니다.

Mounted에서는 자식컴포넌트가 부모 컴포넌트보다 먼저 실행됩니다.

주의할 점은, 만약 mounted 훅에서 DOM을 수정하는 로직이 있는 경우에는 모든 컴포넌트가 DOM에 마운트된 후에 로직을 실행해 주는 함수인 nextTick()함수에 사용해야 합니다. 이 내용은 Vue.js의 공식문서에 잘 나와 있습니다.

공식 문서 Mounted 훅 내용

 

간단한 예시 코드

export default { 
  mounted() { 
    // $el 을 사용할 수 있습니다. 
    console.log('mounted', this.$el); 
    this.$nextTick(() => { 
      // 모든 화면이 렌더링된 후 호출됩니다. 
    }); 
  } 
}

 

Updated

mounted와 비슷한 시점에 실행되는 훅입니다.

컴포넌트의 신규 생성으로 DOM에 마운트 되고 난 후에 실행되는 mounted 훅과는 다르게, updated훅은 기존에 DOM에 있는 컴포넌트가 데이터의 변경으로 컴포넌트가 DOM에 다시 랜더링 된 후에 실행되는 훅입니다.

mounted와 마찬가지로 변경된 데이터가 다시 랜더링이 완료된 DOM을 조작하는 로직을 실행할 경우, nextTick()을 사용할 수 있습니다.

export default { 
  updated() { 
    // $el 을 사용할 수 있습니다. 
    console.log('updated'); 
    this.$nextTick(() => { 
      // 모든 화면이 렌더링된 후 호출됩니다. 
    }); 
  } 
}

저희 제품에서는 사용하지 않는 훅입니다.

 

destroyed

 컴포넌트가 DOM에서 소멸되고 난 후에 동작하는 훅입니다. 소멸되는 컴포넌트에 설정된 Event(@change, @click ...)나 디렉티브 바인딩(v-model, v-if, v-show...)도 함께 소멸됩니다. 당연히, 자식 컴포넌트를 가지는 부모 컴포넌트가 destroyed 될 경우에는 하위의 자식 컴포넌트도 소멸됩니다.

 

제품에서는 destroyed 훅을 두 가지 용도로 사용했습니다.

첫 번째로는 Vue.js 프레임워크에서 중앙 저장소로 사용하는 Store에 저장된 페이지 상태 정보 데이터를 컴포넌트 소멸에 의해서 초기화하는 경우에 사용했습니다. 제품에서 브라우저 '뒤로 가기'를 동작시키면, 아래 사진처럼 이전 경로로 이동은 했지만, 페이지의 내용이 출력되지 않는 버그가 있었습니다. 이전 상태 값이 앞의 경로에서 사용한 채로 초기화가 되지 않았기 때문입니다.

destroyed 훅에서 store의 데이터를 변경해주는 것으로 버그를 해결했습니다.

두 번째로는 제품 웹에서 ems나 emc로부터 주기적으로 센서정보를 받아오는 API를 호출하기 위해서 Interval을 사용합니다. 컴포넌트가 제거될 때, clearInterval하기 위한 용도로 사용하고 있습니다.

 

 

 

주요 훅의 특징을 알아보았습니다.

감사합니다.

 

 

 

 

 

참고 : 

Vue.js 공식 사이트

지그재그 기술 블로그

https://beomy.tistory.com/47