DOM 요소에 접근하는 방법

Vue의 DOM 요소에 접근하는 방법은 $el, $refs 두 가지가 있다.

$el

• 컴포넌트 루트 DOM 요소에 접근할 때 사용
• mounted될 때까지 undefined

$refs

• 루트 이외의 DOM 요소에 접근할 때 사용 (자식 컴포넌트 등)
• ref 속성으로 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여

<template>
  <div>
  	// 접근할 요소에 ref 속성 부여
    <input type="text" ref="target">
  </div>
</template>

<script>
export default {
  mounted(){
    // ref 속성에 접근
    this.$refs.target.focus();
  }
}
</script>

컴포넌트가 화면에 렌더링 되면 input에 focus가 된다.

$refs는 컴포넌트가 렌더링 된 후에 존재하게 된다. 해당 속성은 자식 요소에 직접 접근하기 위해서만 사용되어야 한다.
즉, 템플릿이나 computed 속성에서 $refs에 접근해서는 안 된다.