[Vue.js] 라이프 사이클 훅 (Lifecycle Hook)

라이프 사이클 이란?

• 라이크 사이클은 어떤 개체,프로세스, 또는 시스템이 생성되고 사용되고 파괴 되는 과정을 나타내는 개념이다.
• 보통 프로그래밍에서의 라이프 사이클은 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기를 뜻한다.

 

Vue.js의 라이프 사이클 훅?

• Vue.js에서 라이프 사이클 훅은 컴포넌트가 생성, 업데이트 및 소멸하는 과정에서 일어나는 이벤트를 얘기한다. 이를 통해 Vue 컴포넌트의 상태 변화에 따른 로직을 적용할 수 있다.

 

★Vue.js에서 제공되는 라이프 사이클 훅

 

1. beforeCreate

- 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클의 단계.

- 이 단계에서는 data,methods 속성이 아직 Vue 인스턴스에 정의되어 있지 않는다.

- DOM과 같은 화면단 요소의 접근이 불가한 단계이다.

 

2. create

- data,methods속성이 인스턴스에 정의되어 있는 단계이다. 즉 두 속성에 접근하여 로직 실행이 가능한 단계라는 뜻이다.

ex) this.data, this.methodsName() 등..

- 여전히 인스턴스가 DOM에 부착되기 전이기 때문에 DOM에 접근이 불가능한 단계이다.

- 서버에서 데이터를 요청하여 받아오는 로직을 수행하기 좋은 단계이다.

 

3. beforeMount

- 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 DOM에 인스턴스를 부착하기전에 호출되는 단계이다.

- render() 함수가 호출되기 직전의 로직을 추가하기 좋다 

*) render()함수는 자바스크립트로써 화면의 DOM을 그리는 함수를 뜻한다.

 

4. mounted

- el 속성에서 지정한 DOM에 Vue 인스턴스가 부착되고 나서의 단계이다.

- 이 시점부터 <template> 속성에 정의한 DOM요소들에 접근이 가능해져서 요소를 제어하는 로직을 수행하기 좋은 단계이며, 가장 많이 사용되는 라이프 사이클 훅이다.

 

5. beforeUpdate

- Vue컴포넌트의 데이터 변경으로 인해 DOM이 재 랜더링 되기 직전에 호출되는 단계이다.

- 업데이트 된 값들을 가지고 있는 라이프 사이클 상태이기 때문에, 업데이트 된 값으로 다른 값들을 업데이트 할 수 있다.

- 데이터를 변경하는 로직을 이 단계에서 실행하면 그 로직으로 인해 다시 이 단계(beforeUpdate)의 훅이 호출 된다. 그로인해 무한루프에 빠질 수 있으므로 조심해서 사용해야하는 훅이다.

 

6. updated

- Vue 컴포넌트의 데이터 변경으로 인해 DOM이 재 랜더링 된 후 호출되는 단계이다.

- 데이터 변경으로 인해 DOM이 업데이트 된 후 호출되는 훅이기 때문에 데이터가 변경 된 이후의 DOM을 이용해야하는 처리를 할 때 사용하기 좋은 라이프 사이클 훅이다.

- 이 전 단계의 라이프 사이클 훅인 beforeUpdate와 다르게 updated 단계에서는 이 훅이 호출 될 때 데이터 변경을 추척하고, 해당변경으로 인해 다시 'updated' 훅이 호출되는 것을 방지하기 때문에 무한루프에 빠질 걱정은 안해도 된다.

- 일반적으로 데이터가 변경된 후의 DOM조작을 수행하려면 'updated'훅을 사용하는것이 좋다.

 

7. beforeDestroy 

- Vue 인스턴스가 파괴되기 직전에 호출되는 단계이다.

- 이 단계에서는 아직 Vue인스턴스에 속한 데이터 및 이벤트 리스너가 정상적으로 작동한다.

- 주로 정리 작업, 컴포넌트가 파괴되기 전 필요한 로직을 실행하는데 사용된다.

 

8. destroyed

- Vue 인스턴스가 완전히 파괴된 후에 호출되는 단계이다.

- 이 시점에서 Vue 인스턴스와 관련된 리소스를 해제하고, 이벤트 리스너를 제거하고, 메모리에서 인스턴스를 정리하는 등의 정리작업을 수행하는데 사용된다. 

- 이 훅이 호출된 후에는 해당 Vue인스턴스를 다시 사용 할 수 없다.

 

Vue.js에서 사용하는 라이프 사이클 훅 문법

export default({
  data() {
      return {

      }
  },

  beforeCreate() {
    // 로직
  },
  created() {
    // 로직
  },
  beforeMount() {
    // 로직
  },
  mounted() {
    // 로직
  },
  beforeUpdate() {
    // 로직
  },
  updated() {
    // 로직
  },
  beforeDestroy() {
    // 로직
  },
  destroyed() {
    // 로직
  },
});