Template Refs

Vue는 보통 자동으로 화면을 업데이트해주기 때문에 직접적으로 DOM 요소에 접근할 일이 거의 없습니다. 하지만 특정 상황에서는 DOM 요소를 직접 제어해야 할 때도 있습니다. 이럴 때 특별한 ref 속성을 사용하면 DOM 요소에 직접 접근할 수 있습니다.

<template>
  <input ref="input" />
</template>

ref는 v-for 챕터에서 설명된 key 속성과 유사한 특별 속성입니다. ref를 사용하면 특정 DOM 요소나 자식 컴포넌트 인스턴스에 직접 접근할 수 있습니다. 이 기능은 예를 들어 컴포넌트가 로드될 때 입력란에 자동으로 포커스를 맞추거나, 특정 요소에 서드파티 라이브러리를 초기화할 때 유용합니다.

Refs 접근하기

Composition API에서는 useTemplateRef() (3.5+)를 사용하여 참조를 얻을 수 있습니다:

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

// 첫 번째 인자는 template의 ref 값과 일치해야 합니다
const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

TypeScript를 사용할 경우, Vue의 IDE 기능(자동 완성, 타입 검사, 오류 표시, 코드 네비게이션 )과 vue-tsc가 input.value의 타입을 자동으로 추론합니다. 즉, ref를 통해 접근하는 input.value가 어떤 HTML 요소인지 알아서 파악해 적절한 타입을 제공합니다.

예를 들어, input이 <input> 요소라면, input.value의 타입을 HTMLInputElement로 추론하여 해당 타입에 맞는 메서드와 속성을 사용할 수 있게 도와줍니다.

이를 통해 코드 작성 시 타입 오류를 줄이고, 요소에 적합한 메서드나 속성을 추천받을 수 있어 개발이 더 편리해집니다.

참조는 컴포넌트가 마운트된 후에만 접근할 수 있습니다. 첫 번째 렌더링 시에는 요소가 존재하지 않으므로, template에서 input을 바로 사용하면 null입니다.

template 참조의 변경 사항을 감지하려는 경우, null 값을 처리해야 합니다:

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // 아직 마운트되지 않았거나, 요소가 v-if로 제거됨
  }
})

실습 - useTemplateRef()

v-for 내부의 Refs (v3.5 이상 필요)