템플릿 ref는 DOM 요소나 자식 컴포넌트에 어떻게 접근하나요? – Vue.js · IT 면접 연습

템플릿 ref는 DOM 요소나 자식 컴포넌트에 어떻게 접근하나요?

템플릿 ref는 Vue의 선언적 모델이 다루지 못하는 명령형 작업이 필요할 때 — 입력에 포커스, 요소 측정, 자식의 메서드 호출 등 — 실제 DOM 요소(또는 자식 컴포넌트 인스턴스)에 대한 직접 참조를 얻게 해줍니다.

DOM 요소 접근

vue

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

const inputEl = ref(null);   // 1. ref 생성 (처음에는 null)

onMounted(() => {
  inputEl.value.focus();      // 3. 마운트 후, .value가 DOM 요소
});
</script>

<template>
  <input ref="inputEl" />     <!-- 2. ref 속성 이름이 변수와 일치 -->
</template>

패턴: 을 선언하고, 요소에 으로 연결한 뒤, 마운트 후 가 실제 DOM 노드가 됩니다. 마운트 전에는 이므로 setup이 아니라 (또는 이후)에서 접근하세요.

ref(null)

ref="name"

inputEl.value

null

onMounted

text

✓ 입력 포커스/선택
✓ 크기/위치 측정 (getBoundingClientRect)
✓ 서드파티 DOM 라이브러리 통합 (차트, 맵, 비디오 플레이어)
✓ 수동 스크롤 제어, 캔버스 그리기

vue

<script setup>
const itemRefs = ref([]);
</script>
<template>
  <li v-for="item in items" :key="item.id" ref="itemRefs">{{ item.name }}</li>
</template>
<!-- itemRefs.value는 <li> 요소들의 배열이 됨 -->

vue

<script setup>
const childRef = ref(null);
function callChild() {
  childRef.value.someMethod(); // 자식이 노출한 메서드 호출
}
</script>
<template>
  <ChildComponent ref="childRef" />
</template>

vue

<!-- 자식은 접근 가능한 것을 노출(EXPOSE)해야 함 (script setup은 기본적으로 닫혀 있음) -->
<script setup>
function someMethod() {}
defineExpose({ someMethod }); // 부모의 ref를 통해 접근 가능하게 만듦
</script>

템플릿 ref는 DOM 요소나 자식 컴포넌트에 어떻게 접근하나요?

DOM 요소 접근

흔한 용도

v-for 내부의 ref (요소 배열)

자식 컴포넌트에 대한 ref

왜 중요한가