[vue] ref

ref?
뷰에서 컴포넌트 또는 DOM에 접근하기 위해 사용하는 속성으로 마운트된 요소에만 적용가능하다.
Dom에 직접 접근하여 컨트롤 해야 될 경우 사용한다.

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

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

<script>
export default {
  mounted(){
    console.log('target', this.$refs.target);
    //<input type="text">가 출력된다.
  }
}
</script>

👉 ref="target"

• 접근하고 싶은 태그에 ref속성명을 할당 한다.
• ref는 id처럼 중복이 불가능 하다.
• $refs는 component가 렌더링 된 후에 접근이 가능하다.
• 만약, beforeCreate또는 created에서 $refs를 접근하게 된다면 undefined가 출력 된다.
  (Vue 라이프사이클 에서 beforeCreate, created는 Dom이 부착되기 전 단계)