템플릿 참조 | Vue.js

→ Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화한다.

• 하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 있을 수 있다.
  • 이 때, ref 라는 특별한 속성을 사용할 수 있다!

ref 라는 특수 속성을 통해, 마운트된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있다.

ref 로 접근하기

→ 컴포지션 API로 참조를 얻으려면 동일한 이름으로 ref 를 선언해야 한다.

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

// 엘리먼트 참조를 위해 ref를 선언하십시오.
// 이름은 템플릿 ref 값과 일치해야 합니다.
const input = ref(null)

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

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

• <script setup> 을 사용하지 않는 경우, setup() 에서 참조를 반환해야 한다.

export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

→ 컴포넌트가 마운트된 후에만 ref 에 접근할 수 있다.

• 첫 렌더링이 끝날 때까지는 엘리먼트가 존재하지 않기 때문에, input 은 첫 렌더링 시 null 이다.