[생명주기와 템플릿 참조] 필연적으로 DOM을 수동으로 작업해야 하는 경우

https://ko.vuejs.org/tutorial/#step-9

Vue.js

 

이번 프로젝트에서 화면을 Vue.js를 사용하기로 하여 튜토리얼을 보며 학습하고 있다. vue.js 3을 넘어오면서 사용하는 문법의 경우, react와 비슷한 양상을 보였고 SFC(싱글 파일 컴포넌트) 형식과 Composition 형식의 학습을 시도하였다. 

 

템플릿 참조는 컴포넌트가 마운트된 후에만 접근할 수 있습니다.

 

튜토리얼 생명주기 표

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

const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = '마운트 되었어요!'
})
</script>

<template>
  <p ref="pElementRef">안녕</p>
</template>