Template Refs

Template Refs

템플릿에서 특정 DOM 요소나 컴포넌트 인스턴스에 직접 접근하기 위해 사용하는 ref

ref로 접근하기

• DOM 엘리먼트에 직접 접근하기 위해 ref 속성을 사용
• useTemplateRef() 함수를 사용하여 접근 가능 (Vue 3.5 이상)
• Vue 3.5 미만 버전에서는 같은 이름의 변수 사용
• DOM이 렌더링된 후에 (onMounted 이후에) 접근해야 함

<template>
  <input ref="inputRef" />
  <button @click="focusInput">Focus Input</button>
</template>

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

  const inputRef = useTemplateRef("inputRef"); // Vue 3.5 이상
  // const inputRef = ref(null) // Vue 3.5 미만

  function focusInput() {
    inputRef.value.focus();
  }

  onMounted(() => {
    console.log(inputRef.value); // <input> DOM 요소에 접근 가능
  });
</script>

v-for 내부에서 ref 사용하기

• ref가 v-for 내부에서 사용되면, 해당 ref는 마운트 후 엘리먼트로 채워짐

<template>
  <ul>
    <li v-for="item in list" :key="item" ref="items">{{ item }}</li>
  </ul>
</template>

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

  const list = ref(["A", "B", "C"]);

  const itemRefs = useTemplateRef("items");

  onMounted(() => console.log(itemRefs.value));
</script>

함수로 참조하기

• :ref="setItems"로 전달한 함수가 DOM 요소를 렌더링할 때마다 호출됨
• 함수는 각 DOM 엘리먼트를 수동으로 수집해서 ref 배열에 넣을 수 있음

<template>
  <ul>
    <li v-for="item in list" :key="item" :ref="setItems">{{ item }}</li>
  </ul>
</template>

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

  const list = ref(["A", "B", "C"]);
  const itemRefs = ref([]);

  function setItems(el) {
    if (el) itemRefs.value.push(el);
  }

  onMounted(() => console.log(itemRefs.value));
</script>

컴포넌트에 ref 사용하기

• 부모에서 ref를 사용해 자식의 메서드나 데이터를 접근 가능

<!-- Parent.vue -->
<template>
  <Child ref="child"></Child>
</template>

<script>
  import { onMounted, useTemplateRef } from "vue";
  import Child from "./Child.vue";

  export default {
    components: {
      Child,
    },
    setup() {
      const child = useTemplateRef("child");

      onMounted(() => {
        console.log(child.value.message);
      });

      return { child };
    },
  };
</script>

<!-- Child.vue -->
<template>
  <div>자식 컴포넌트입니다.</div>
</template>

<script>
  import { ref } from "vue";

  export default {
    setup() {
      const message = ref("Hello Child!");

      return {
        message,
      };
    },
  };
</script>

• <script setup>에서는 자동으로 노출 불가능하므로 defineExpose()를 사용하여 노출시켜야 함

<!-- Parent.vue -->
<template>
  <Child ref="child"></Child>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import Child from "./Child.vue";

  const child = ref(null);

  onMounted(() => {
    console.log(child.value.message);
  });
</script>

<!-- Child.vue -->
<template>
  <div>자식 컴포넌트입니다.</div>
</template>

<script setup>
  import { ref, defineExpose } from "vue";

  const message = ref("Hello Child!");

  defineExpose({
    message,
  });
</script>

출처: 짐코딩, 「Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"」, 인프런
출처: Vue.js