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

1. 개념

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

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

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

이때 사용하는 속성이 $ref 이다.

(자바스크립트의 querySelector, getElementsByClassName, getElementById 와 같은 역할)

 

 

 

2. 장점

• 자식 컴포넌트에 직접적으로 접근할 수 있음
• DOM 조작 메서드 없이 편리하게 엘리먼트를 조작할 수 있음

 

 

3. $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.$ref.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속성을 지양해야 하는 이유이다.

 

 

 

4. refs를 활용한 자식 컴포넌트 DOM 접근

<!-- App.vue -->
<template>
  <Component ref="vue" />
</template>

<script>
import Component from './components/Component.vue';

export default {
  name: 'App',
  components: {
    Component,
  },
  mounted() {
    console.log(this.$refs.vue);
    console.log(this.$refs.vue.$refs);
    console.log(this.$refs.vue.$refs.js);
    console.log(this.$refs.vue.$refs.react);
  },
</script>

<!-- Component.vue -->
<template>
  <h1>Hello Vue.js!!</h1>
  <h1 ref="js">Javascript</h1>
  <h1 ref="react">React</h1>
</template>

<script>
export default {};
</script>

 

5. focus

 돔에 접근해서 input tag에 포커싱 이벤트를 주는방법

<input type="password" 
        v-model="password" 
        @keyup.enter="password" 
        placeholder="비밀번호를 입력해주세요" 
        ref="test">

<script>
  password : function() { 
    alert('비밀번호 유효성체크'); 
    this.$refs.test.focus(); 
  }
</script> 

 

 

 

6. 유의 사항

• 개발자가 DOM 을 직접 다루지 않는 뷰의 목적 중 하나에 위배
• ref 속성은 컴포넌트가 랜더링이 된 이후 적용되기 때문에 반응형으로 구성하기 위한 computed 나 template 에서 사용하면 안됨