[ Vue.js 3 공식 문서 ] 2. Essentials - Lifecycle Hooks

 

[ Reference ] 

https://vuejs.org/guide/essentials/lifecycle.html

Lifecycle Hooks | Vue.js

https://vuejs.org/api/composition-api-lifecycle.html

Composition API: Lifecycle Hooks | Vue.js

 

  원래는 Essentials 의 내용만을 적고 상세한 내용들은 다음에 옮기려고 했으나 이번에는 이 두 가지를 한 번에 같이 하는 것이 더 효율적이라는 생각이 들어서 함께 사용하기로 했다. 

 

  !! 주의점: 여기에서 설명하는 라이플 사이클 hook은 모두 Composition API 에서만 사용하는 것들입니다. Options API 의 라이플 사이클 훅은 아래의 경로에서 따로 확인해주셔야 합니다. 

 

https://vuejs.org/api/options-lifecycle.html

 

  또, 이번에 설명할 라이프 사이클 hook은 모든 것을 다루는 것이 아니라 사용할 만한 것들, 혹은 지금 사용되고 있는 것들만을 적도록 하겠습니다. 몇 개는 정말 어쩌다 한 번 필요할 때 직접 공식 문서에서 찾아가서 보는 게 더 좋을 거 같다. 

 

---

1. Lifecycle Diagram

 

 

  위의 다이어그램이 lifecycle 에서 사용할 수 있는 인스턴스들의 내용을 모두 담고 있다. 모든 것을 다 기억할 필요는 없지만 하나씩 더 자세하게 알수록 사용하기에 매우 유용하다. 

 

---

2. Lifecycle Hooks

onMounted( ) 

  callback 함수를 컴포넌트가 마운트된 다음에 실행되도록 예약한다. (* 코드를 작성하고 바로 실행하는 개념이 아니라서 Register, 예약하다는 언어로 표현하고 있다. 라이프 사이클에서 mounted )

 

  자체 DOM tree 가 생성되어 부모 컨테이너에 삽입된다. 이 hook 은 일반적으로 컴포넌트가 렌더링된 DOM 에 접근해야 하는 사이드 이펙트를 수행해야 하거나 서버 렌더링된 머플리케이션에서 클라인언트로 DOM 관련 코드를 제한할 때 사용된다. SSR 중에는 이 hook 을 호출하지 않는다.

 

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

  

---

onUpdated( )

  반응성 있는 상태에 의해서 DOM tree 가 업데이트 된 후에 콜백함수가 실행한다. (* 라이플 사이클에서 updated) 다만, "특정한" 상태가 변경되어 업데이트 된 DOM 에 접근해야 하는 경우에는 ** nextTick( ) ** 을 사용하는 것이 좋다. 주의할 점은 만약 updated 의 hook 에서 상태를 변경하는 코드를 작성하면 무한 루프에 빠질 수 있다. 

 

<script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)

onUpdated(() => {
  // text content should be the same as current `count.value`
  console.log(document.getElementById('count').textContent)
})
</script>

<template>
  <button id="count" @click="count++">{{ count }}</button>
</template>

 

onErrorCaptured( )

  하위 컴포넌트에서 올라오는 에러가 감지됐을 때 콜백을 호출한다. 타입을 정의하면 다음과 같다.

 

function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void

 

 다음 아래의 리스트에서 발생한 에러들을 이 hook이 포착할 수 있다.

 

• 컴포넌트 렌더링
• 이벤트 핸들러
• 라이플 사이클 hook
• setup( ) 함수
• Watchers
• 커스터마이징된 directive hook
• Transition hook

 

  이 hook 은 에러, 에러를 발생시킨 컴포넌트의 인스턴스, 에러의 원인 타입을 문자열, 이게 세 가지를 인수로 받게 된다. errorCaptured 에서는 컴포넌트의 상태를 수정해서 사용자에게 오류 샅애를 표시할 수 있다. 하지만 에러난 상태가 에러를 발생시킨 기존의 컨텐츠를 렌더링하지 않아야 한다. 만약 그렇게 되면 무한 루프에 빠지게 된다.

 

  이 hook 이 false 로 반환되어 더 이상 오류가 나오지 않도록 할 수 있다. 

1.  기본적으로 규정할 수 있는 모든 에러들은 application api 로 전송되기 때문에( 여기서 application api 는 app.config.errorHandler)  이런 오류를 한 곳에서 분석을 담당하는 서비스에 넘길 수 있다.
   
   
2. 컴포넌트의 상속 체인 또는 상위 체인에 에러를 포착한 후크가 여러 개 있는 경우 동일한 오류에서 모두 실행된다.
   
   
3. errorCaptured hook 자체가 오류를 발생시킨다면 이 오류와 원래 포착된 오류는 모두 app.config.errorHandler 로 전송된다.
4. errorCaputred hook 은 오류가 더이상 전파되지 않도록 false 를 반환할 수 있다. 이게 의미하는 바는 "이 옿류가 처리되었으므로 무시해도 된다"  는 것이다. 이 오류에 의해서 발생되는 파생 에러들은 app.config.errorHandler 가 호출되지 않도록 막을 수 있다. 

  

onRenderTracked( ), onRenderTriggered

  Tracked 는 컴포넌트의 렌더 효과에 의해 반응형 족송성이 추적될 때 호출할 debug 용 hook 실행한다. 

 

function onRenderTracked(callback: DebuggerHook): void

type DebuggerHook = (e: DebuggerEvent) => void

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

  Triggered 는 반응형 종속성이 컴포넌트가 렌더링 됐을 때의 효과를 다시 실행할 때 호출할 debug 용 hook 을 실행한다.

 

function onRenderTriggered(callback: DebuggerHook): void

type DebuggerHook = (e: DebuggerEvent) => void

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}