Vue에서 직접 DOM 요소에 접근하기 위한 Template refs

Template refs

☁ refs를 사용하는 이유

vue의 선언적 렌더링 모델 대부분은 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM 요소에 직접 접근해야 하는 경우, ref 속성을 사용해서 쉽게 접근할 수 있다.

 

<input type="text" ref="input" />

특수 속성 ref에 의해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다.

 

 

☁ refs 접근하기

composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다. 또한 컴포넌트가 마운트된 후에 접근이 가능하다.

template 안에서 input으로 refs 참조에 접근하려는 경우 렌더링 되기 전에는 참조가 null이다.

template의 내장 객체 $refs로 refs 참조에 접근할 수 있다.

 

<template>
  <ul>
  	<!-- 특수속성 ref 선언 -->
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const list = ref([1, 2, 3])
    
    // 동일한 이름의 ref 선언
    // null이었다가 mounte된 후에 채워진다.
    const itemRefs = ref([])
    onMounted(() => console.log(itemRefs.value))
    
    return {
      list,
      itemRefs
    }
  }
}

 

v-for 내부에서 ref가 사용될 때 ref는 마운트 후 요소 배열로 채워지게 된다.

컴포넌트에 refs가 사용될때 ref를 자식 컴포넌트에 사용하면 자식 컴포넌트에 참조값을 얻게 되어, 자식 컴포넌트의 모든 속성과 메서드에 대해 접근이 가능해진다 → 즉, 부모와 자식간의 의존도가 생겨서 필요한 경우에만 사용하도록 하자

 

앵간하면  ref보다 props를 사용하여 부모 자식간의 상호작용을 구현하자.

 

 

☁ 반대로 상위 컴포넌트를 참조하기

<template>
  <div>Child Component</div>
  <div>{{ $parent.message }}</div>
</template>

자식 컴포넌트에서 상위 컴포넌트를 참조하기 위해서는 내장객체 $parent를 활용할 수 있다.