[Vue.js] Document 따라하기 - Template Refs

Vue의 선언적 렌더링 모델은 대부분의 직접 DOM 작업을 추상화하지만 기본 DOM 요소에 직접 액세스해야 하는 경우가 여전히 있을 수 있다. 이를 달성하기 위해 특수 ref 속성을 사용할 수 있다.

<input ref="input">

ref는 v-for 장에서 언급한 key 속성과 유사한 특수 속성이다. 이를 통해 마운트 된 특정 DOM element 또는 하위 component 인스턴스에 직접적인 참조를 얻을 수 있다. 예를 들어 프로그래밍 방식으로 component 마운트의 인풋에 초점을 맞추거나 엘리먼트에서 타사 라이브러리를 초기화하려는 경우에 유용할 수 있다.

 

Accessing the Refs

참조 결과는 this.$refs에 노출된다.

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

Component가 마운트 된 후에만 ref에 액세스 할 수 있다. 템플릿 표현식에서 $refs.input에 액세스 하려고 하면 첫 번째 렌더링에서 null이 된다. 이는 첫 번 째 렌더링이 끝날 때까지 element가 존재하지 않기 때문이다.

Accessing the Refs

Accessing the Refs

 

Refs inside v-for

v3.2.25 이상이어야 한다.

ref가 v-for 내부에서 사용되면 ref 값은 해당 element를 포함하는 배열이 된다.

<script>
export default {
  data() {
    return {
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
    console.log(this.$refs.items)
  }
}
</script>

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

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

Refs inside v-for

Refs inside v-for

 

Function Refs

문자열의 key 대신 ref 속성을 함수에 바인딩할 수도 있다. 이 함수는 각 component 업데이트 시 호출되며, element 참조를 저장할 위치에 대한 완전한 유연성을 제공한다. 이 함수는 첫 번째 인수로 element 참조를 받는다.

<input :ref="(el) => { /* el을 속성이나 ref에 할당 */ }">

:ref와 같이 동적 바인딩으로 사용하는 경우에는 ref의 이름 대신 함수를 전달할 수 있다. element가 마운트 해제되는 경우 인수는 null이다. 물론 인라인 함수 대신 메서드를 사용할 수 있다.

 

Ref on Component

이 섹션에서는 component에 대한 지식이 있다고 가정하므로, 건너뛰고 나중에 읽어도 된다.

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child는 <Child />의 인스턴스를 가진다
  }
}
</script>

<template>
  <Child ref="child" />
</template>

참조된 인스턴스는 자식 component의 this와 동일하다. 즉, 부모 component는 자식 component의 모든 속성과 메서드에 대한 전체 액세스 권한을 갖는다. 이렇게 하면 부모와 자식 간에 밀접하게 결합된 구현 세부 정보를 쉽게 생성할 수 있으므로 component 참조는 절대적으로 필요할 때만 사용해야 한다. 대부분의 경우 표준 props를 사용하여 부모/자식 상호 작용을 구현하고 인터페이스를 먼저 내보내야 합니다.

 

expose 옵션을 사용하여 자식 인스턴스에 대한 액세스를 제한할 수 있다.

export default {
  expose: ['publicData', 'publicMethod'],
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}

위의 예에서 템플릿 ref를 통해 이 component를 참조하는 부모는 publicData 및 publicMethod에만 액세스 할 수 있다.

Ref on Component

Ref on Component

Ref on Component

 

관련 Repo

https://github.com/galaxyuliana/VueExercises/tree/master/first-vue-project/src/components/Exercise/11

 

참고 자료

https://vuejs.org/guide/essentials/template-refs.html