Vue Lifecycle
각 Vue 구성 요소 Instance는 생성될 때 일련의 초기화 단계를 거치게 된다.
예를 들어, 데이터 관찰(Create)을 설정하고 템플릿을 컴파일하고 DOM에 인스턴스를 마운트(Mount)하고 데이터가 변경될 때 DOM을 업데이트(Update)해야 한다.
그 과정에서 Lifecycle Hooks(시점을 가지고 있다: 사용자가 특정 코드를 추가할 수 있다.) 이라는 기능도 실행하여 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다.
생명 주기 훅
각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다.
예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다.
그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다.
지금까지 Vue는 반응형 및 선언적 렌더링으로 모든 DOM 업데이트를 처리해 왔다.
그러나 필연적으로 DOM을 수동으로 작업해야 하는 경우가 있다.
우리는 특별한 속성인 ref를 사용하여 템플릿 참조를 요청할 수 있다:
<p ref="pElementRef">안녕</p>참조에 접근하려면 다음과 같이 이름이 일치하는 ref를 선언해야 한다:
const pElementRef = ref(null)ref는 null 값으로 초기화합니다.
마운트된 후, 코드를 실행하려면 onMounted() 함수를 사용해야 합니다:
import { onMounted } from 'vue'
onMounted(() => {
// 이제 컴포넌트가 마운트되었습니다.
})이것을 컴포넌트 생명 주기 훅이라고 하며, 생명 주기의 특정 시간에 호출할 콜백을 등록할 수 있습니다. onUpdated 및 onUnmounted와 같은 다른 훅도 있습니다. 자세한 내용은 생명 주기 도표에서 다룹니다.
이제 onMounted 훅을 추가하고, p.value를 통해
에 접근한 다음, 직접 DOM을 조작해봅시다(예: textContent 변경).
<script setup>
import { ref, onMounted } from 'vue'
const pElementRef = ref(null)
onMounted(() => {
pElementRef.value.textContent = '마운트 되었어요!'
})
</script>
<template>
<p ref="pElementRef">안녕</p>
</template>