📚 Reference

• 공식 문서 1

📜 Chapter

ref, reactive

useTemplateRef()

• useTemplateRef()
• Vue 3.5부터 공식적으로 도입된 Composition API 함수로, 템플릿 참조(Template Ref)를 선언하는 새롭고 개선된 방식이다.
• 이 함수는 템플릿 내의 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근하여 조작할 때 사용된다.

useTemplateRef() - 사용법

• useTemplateRef는 <script setup>에서 ref 속성으로 지정된 요소를 참조하기 위해 사용된다.

사용 단계

1. <script setup>에서 선언: useTemplateRef() 함수를 호출하고, 참조할 <template>의 ref 속성에 사용될 문자열 식별자를 인자로 전달한다.
2. <template>에 연결: 해당 식별자를 DOM 요소나 컴포넌트의 ref 속성에 할당한다.
3. 접근: 컴포넌트가 마운트된 후, 반환된 값의 .value를 통해 해당 요소에 접근할 수 있다.

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

// 1. 'myInput'이라는 문자열 식별자로 템플릿 참조 선언
//    반환된 inputRef는 일반 ref와 마찬가지로 .value로 접근합니다.
const inputRef = useTemplateRef('myInput'); 

onMounted(() => {
  // 3. 마운트 후 DOM 요소에 직접 접근하여 focus 설정
  inputRef.value?.focus(); 
});
</script>

<template>
  <input ref="myInput" placeholder="여기에 포커스가 맞춰집니다." />
</template>