💻 Template Refs

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

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

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

1. Refs 접근하기

Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다.

• 컴포넌트가 마운트된 후에 접근할 수 있다.
• <template> 안에서 input으로 Refs 참조에 접근하려는 경우 렌더링되기 전에는 참조가 null일 수 있다.
• <template> 안에서 $refs 내장 객체로 Refs 참조에 접근할 수 있다.

2. V-for 내부 참조

v3.2.25 이상에서 동작
v-for내부에서 ref가 사용될 때 ref는 마운트 후 요소 배열로 채워진다.

<script>
  import { ref, onMounted } from 'vue'
  
  export default {
  	setup() {
  		const list = ref([1, 2, 3]);
  		const itemRefs = ref([]);
  
  		onMounted(() => console.log(itemRefs.value))
  		
  		return{ list, itemRefs }
  	}
 }
</script>

3. 컴포넌트 Refs

ref를 자식 컴포넌트에도 사용할 수 있다. ref로 자식 컴포넌트에 참조값을 얻게 되면 자식 컴포넌트의 모든 속성과 메서드에 대한 전체를 접근할 수 있다.
이러한 경우 부모/자식 컴포넌트간 의존도가 생기기 때문에 이러한 방법은 반드시 필요한 경우에만 사용해야 한다. 그리고 일반적으로 ref보다 표준 props를 사용하여 부모/자식간 상호작용을 구현해야 한다.

child.vue

<template>
  <div>Child Component</div>
</template>

<script>
  import { ref } from `vue`;
  
  export default {
  	setup() {
  		const message = ref('Hello Child!');
  		const sayHello = () => {
  			alert(message.value);
  		};
  		return { message, sayHello };
  	},
  };
</script>

부모 컴포넌트에서 자식 컴포넌트의 상태나 메서드에 접근할 수 있다.