[Vue] Dom접근 하기 - $ref, $refs

개념

Vue를 사용하면 직접 Dom요소에 접근할 경우가 거의 없다.

하지만 가끔 Dom을 직접 접근하여 컨트롤 해야 될 경우가 생길 수 있다.

(아마 특정 영역에 focus를 주기 위해 많이 사용하지 싶다.)

이때 사용하는 속성이 $ref 이다. (자바스크립트의 querySelector와 같은 역할)

 

$ref 기본기

<template>
  <div>
    <input type="text" ref="target">
  </div>
</template>

<script>
export default {
  mounted(){
    console.log('target', this.$refs.target);
  }
}
</script>

👉 ref="target"

1. 접근하고 싶은 태그에 ref속성명을 할당 한다.
2. ref는 id처럼 중복이 불가능 하다.

 

👉 console.log('target', this.$refs.target)

1. $refs로 해당 태그에 접근 할 수 있다.
2. 콘솔에는 <input type="text">가 출력 된다.

 

👉 mounted(){ ... }

1. $refs는 component가 렌더링 된 후에 접근이 가능하다.
2. 만약, beforeCreate또는 created에서 $refs를 접근하게 된다면 undefined가 출력 된다. (Vue 라이프사이클 에서 beforeCreate, created는 Dom이 부착되기 전 단계)

 

가급적 직접 Dom에 접근하는 방법은 지양하는게 좋다.

Vue 2.0 부터는 Virtual DOM을 사용 한다.

Virtual DOM을 사용하는 다양한 이유가 있겠지만, Virtual DOM으로 실제 Dom의 조작을 최소화 하여 Dom을 효율적으로 컨트롤 하기 위해 사용 되어진다.

그런데 $ref속성으로 Dom에 직접 접근 한다면 Virtual DOM을 사용할 필요성이 없어 진다.

예외적인 상황이 아닌 경우를 제외하고는 가급적 $ref속성을 지양해야 하는 이유이다.

 

$ref 속성을 사용한 예제

<template>
  <div>
    <input type="text" ref="target">
  </div>
</template>

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

👉 this.$refs.target.focus()

1. component가 화면에 렌더링 되면 input에 focus 된다.

 

Reference

1. https://kr.vuejs.org/v2/guide/components-edge-cases.html