뷰(vue) options api와 composition api의 라이프사이클(lifecycle)

 

 

 

lifecycle 이란 ?

---

vue의 인스턴스가 생성, DOM 트리에 마운트, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기(life cycle) 이라고 합니다. 

여기서 vue는 각 생명주기를 hooking 할 수 있는 방법을 제공하는데 이를 life cycle hook 이라고 합니다. 

 

라이프 사이클을 잘 이해하고 사용해야하는 이유는?
프로그램에 대한 통제권을 가지기 위해서 입니다. 
라이프사이클을 이해하면 컴포넌트의 생성, 변화하는 프로세스를 통제할 수 있게 됩니다.
내가 만든 프로그램이 어떻게 동작되는지 모른다면  복잡하고 또, 예외상황에 맞닿는다면 통제하기 어렵게 될 수도 있습니다.

프로젝트가 실행될 때,
인스턴스를 생성, 데이터 초기화, 데이터 감시설정, 템플릿컴파일,  인스턴스를 DOM에 마운트, 데이터가 변경되면 DOM  업데이트..
이러한 과정에서 life cycle hook이라 불리는 함수를 실행하여,  특정단계에서 의도하는 대로 로직이 실행되게끔 만들 수 있습니다.

 

 

 

Options API ( vue2 ),  Composition API ( vue3 )

---

vue3 미만에서는 Options API , vue3 부터는 Composition  API로 바뀌었습니다.

 

컴포지션(Composition) API는 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue3 버전에 추가된 함수 기반의 API입니다.

 

컴포지션 API가 생긴 이유는 Vue는 "프로젝트 규모가 커질수록 관리하기 힘든 단점"과 "컴포넌트의 계층구조가 복잡할수록 코드에 대한 추적 및 관리가 힘든 점"을 보안하기 위해 등장하게 되었습니다.

 

 

출처: https://ko.vuejs.org/assets/lifecycle.P7awcnoo.png

 

 

 

위에 그림에서 나와있는 hook 중에  vue2와 vue3의 큰 차이점은 

beforeCreate 및  created 가 vue3에서는 이 두단계가 setUp으로 대체  되었다는 것입니다.

 

 

Option API Hooks

• beforeCreated
  • 가장 먼저 실행되는 훅인 beforeCreated는 Vue인스턴스가 초기화 된 직후, data() 혹은 computed와 같은 다른 옵션을 처리하기 전에 호출 됩니다. 
  • 컴포넌트가 DOM에  추가되기 전이기 때문에 data(), methods()등에 접근 불가능합니다. 
  • composition API의 setup() 훅은  이 beforeCreated보다 먼저 호출 됩니다. 
• created
  • 인스턴스가 모든 상태 관련 옵션 처리를 완료한 후 호출됩니다.
  • 반응형 데이터, 계산된 속성, 메서드 및 감시자가 설정된 후, 호출합니다.
  • data를 반응형으로 추적할 수 있게 되며 computed, methods, watch등이 활성화되어 접근이 가능합니다.
  • DOM에 추가되기 전 상태로, data에 직접 접근이 가능하기 때문에, 외부에서 받아온 값들로 data를 세팅하거나, 이벤트 리스너를 선언할때 적합합니다.
• beforeMount
  • DOM에 부착하기 직전에 호출되는 beforeMount훅은 이 단계 전에서 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 상태이므로, 가상 DOM이 생성되어 있으나 아직 실제 DOM 노드가 생성되지는 않은 단계입니다.
• mounted
  • 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로,this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능합니다.
  • 자식 컴포넌트의 mounted 훅 이후에 부모 컴포넌트의 mounted 훅이 발생합니다.
    • 다만, 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼 부모의 mounted훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않습니다.
  • 따라서 this.$nextTick를 이용하면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할 수 있습니다.
  • 이 훅은 일반적으로 컴포넌트의 렌더링된 DOM에 접근해야 하는 사이드 이펙트를 실행하거나, 서버에서 렌더링된 앱의 DOM 관련 코드를 클라이언트에서만 조작하도록 제한하는 데 사용됩니다.
• beforeUpdate
  • 반응형 데이터가 변하면서 업데이트된 상태를 DOM에 적용하여 업데이트하기 직전에 호출됩니다.
  • 이 훅은 Vue가 DOM을 업데이트하기 전, DOM 상태에 접근하는 데 사용할 수 있습니다. 이 훅 내부에서 컴포넌트 상태를 수정하는 것도 안전합니다.
• updated
  • 반응형 상태 변경에 의한 컴포넌트 DOM 트리 업데이트 후 호출됩니다.
  • data를 이 훅에서 변경하는 것은 무한 루프를 일으킬 수 있으므로 이 훅에서는 데이터를 직접 바꾸어서는 안됩니다.
  • mounted훅과 마찬가지로 this.$nextTick을 이용하여 모든 화면이 업데이트된 이후의 상태를 보장할 수 있습니다.
• beforeUnmount
  • 컴포넌트 인스턴스가 마운트 해제되기 직전 호출됩니다.
  • 이 훅이 호출된 경우에도 컴포넌트 인스턴스는 여전히 작동하여 모든 속성에 접근이 가능합니다.(ex. data(), computed(), methods, watch...)
  • 이훅은 이벤트 리스너를 해제하는 등, 사라지기전에 해야할 일들을 처리하기에 적절합니다.
• unmounted
  • 컴포넌트가 언마운트된 이후 호출됩니다.
  • 모든 자식 컴포넌트가 언마운트됩니다..
  • 관련된 모든 반응형 이펙트(setup() 동안 생성된 렌더링 이펙트 및 계산된 속성/감시자)가 중지됩니다.
  • 이 훅을 사용하여 타이머, DOM 이벤트 리스너 또는 서버 연결과 같이 수동으로 생성된 사이드 이펙트를 정리합니다.
• errorCaptured
  • 자식컴포넌트에서 전파된 에러가 캡쳐되었을때 호출됩니다.

 

Option API Hooks VS Composition API

특이사항

• 생명주기훅의 시점은 같지만, composition의 훅이 option 보다 우선권을 가집니다.
  • 예시 → onUpdated 이후 updated 실행
• 모든 생명주기 훅중에서 setup() 이 가장 먼저 실행됩니다.

Option API	Composition API
beforeCreate	setup 으로 대체
created	setup 으로 대체
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured

 

 

 

beforeMount와 onBeforeMount() 사용법 비교

import { ref, onBeforeMount } from 'vue';
export default {
  setup() {
    const root = ref(null);
    /* Composition API */
    onBeforeMount(() => {
      console.log(root.value); // null
    })
    return {
      root,
    }
  },
  beforeMount() {
    /* Options API */
    console.log(this.$el); // null
  },
}

 

 

mounted와 onMounted() 사용법 비교

<template>
  <!-- ref 속성을 사용하여 직접 DOM에 접근 -->
  <div ref="root">HI</div>
</template>

import { ref, onMounted } from 'vue';
export default {
  setup() {
    /* Composition API */
    const root = ref(null);
    onMounted(() => {
      console.log(root.value);  // [object HTMLDivElement]
    })
    return {
      root,
    }
  },
  mounted() {
    /* Options API */
    console.log(this.$el);  // <div ...>
  },
}

 

이 hook에서는 DOM에 직접 액세스를 허용하는 요소를 사용할 수 있습니다. 

option API는 this.$el로 접근이 가능하고,

composition API에서는 ref 속성을 사용하여 접근할 수 있습니다.

 

 

 

updated와 onUpdated() 사용법 비교

<template>
  <div>
    <p>{{ val }}</p>
    <button @click="val = Math.random(0, 100)">Click to Change</button>
  </div>
</template>

 

//option api

export default {
  data() {
    return {
      val: 0,
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate() val: ' + this.val); 
  },
  updated() {
    console.log('updated() val: ' + this.val);
  },
}



//composition api
import { ref, onBeforeUpdate, onUpdated } from 'vue';

export default {
  setup() {
    const val = ref(0);
    
    onBeforeUpdate(() => {
      console.log('beforeUpdate');  // beforeUpdate
    })
    onUpdated(() => {
      console.log('updated() val: ' + val.value); 
    })
    return {
      count,
      val,
    }
  },
}

 

 

위와 같이 vue3는  setup  블럭 안에서  반응형 변수를 선언하고  특정 훅에서 의도에 맞게  조작할 수 있습니다.

즉, 복잡해질 수록 코드에 대한 추적 및 관리가 편리해 지도록 변경 되었습니다.

 

 

 

 

참고:  https://thisiswoo.github.io/development/vue-lifecycle.html#composition-api-%EB%9E%80