라이프사이클 훅 ​

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰을 설정하고, 템플릿을 컴파일하며, 인스턴스를 DOM에 마운트하고, 데이터가 변경될 때 DOM을 업데이트해야 합니다. 이 과정에서 라이프사이클 훅이라고 불리는 함수들이 실행되며, 사용자는 특정 단계에서 자신만의 코드를 추가할 수 있습니다.

라이프사이클 훅 등록하기 ​

예를 들어, onMountedmounted 훅은 컴포넌트가 초기 렌더링을 마치고 DOM 노드를 생성한 후에 코드를 실행하는 데 사용할 수 있습니다:

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

onMounted(() => {
  console.log(`컴포넌트가 이제 마운트되었습니다.`)
})
</script>

export default {
  mounted() {
    console.log(`컴포넌트가 이제 마운트되었습니다.`)
  }
}

인스턴스의 라이프사이클에서 서로 다른 단계에 호출되는 다른 훅들도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, 그리고 onUnmountedmounted, updated, 그리고 unmounted입니다.

setTimeout(() => {
  onMounted(() => {
    // 이 코드는 동작하지 않습니다.
  })
}, 100)

라이프사이클 다이어그램 ​

아래는 인스턴스 라이프사이클에 대한 다이어그램입니다. 지금 당장 모든 내용을 완전히 이해할 필요는 없지만, 더 많이 배우고 개발할수록 유용한 참고 자료가 될 것입니다.

모든 라이프사이클 훅과 각각의 사용 사례에 대한 자세한 내용은 라이프사이클 훅 API 레퍼런스라이프사이클 훅 API 레퍼런스를 참고하세요.