[vue 3] 템플릿 ref

Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 있을 수 있음. 이러한 필요성을 충족시키기 위해 ref라는 특별한 속성을 사용할 수 있음.

<input ref="input">

ref는 v-for 젱에서 언급한 key 속성과 유사한 특수 속성임.
이를 통해 마운트된 특정 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>

컴포넌트가 마운트된 후에만 ref에 접근할 수 있음.
input이 템플릿 표현식에 있으면 첫 렌더링 시 null임. 이는 첫 렌더링이 끝날 때까지 엘리먼트가 존재하지 않기 때문!

템플릿 ref의 변경 사항을 감시하려는 경우 ref에 null값이 있는 경우르 고려해야 함.

watchEffect(() => {
  if (iunput.value) {
    input.value.focus()
  } else {
    // v-if에 의해 아직 마운트 되지 않았거나, 마운트 해제된 경우
  }
})

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

ref가 v-for내부에서 사용되면, 해당 ref는 마운트 후 엘리먼트로 채워지므로 배열 값이어야 함.

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

const list = ref([
  /* ... */
])

const itemRefs = ref([])

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

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

ref 배열은 소스 배열과 동일한 순서를 보장하지 않음.

함수로 참조하기

문자열 키 대신 ref 속성을 함수에 바인딩할 수도 있음.
이 함수는 각 컴포넌트 업데이트 시 호출되며, 엘리먼트 참조를 저장할 위치에 대한 완전한 유연성을 제공함.
이 함수는 첫 번째 인자로 엘리먼트 참조를 받음.
:ref와 같이 동적 바인딩으로 사용하는 경우에는 ref의 이름 대신 함수를 전달할 수 있음. 엘리먼트가 마운트 해제되는 경우 인자는 null임. 물론 인라인 함수 대신 메서들르 사용할 수 있음.