[Vue.js] 컴포넌트 - Refs

컴포넌트 - Refs

 

1.1 개념

비록 props와 이벤트가 존재하지만, 가끔은 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다. 

mounted() {
    const h1El = document.querySelector('#hello')
    console.log(h1El.textContent)
}

원래의 경우라면 위처럼 DOM API를 사용하게 됩니다.

하지만 참조하겠다는 의미의 ref 라는 속성을 사용하면 해당 기능을 간단하게 사용할 수 있습니다.

1.2 Refs 사용 예시

//App.vue
<h1 ref="hello">Hello world!</h1>
export default {
  mounted() {
    console.log(this.$refs.hello.textContent)
  }

Vue에서 제공하는 ref라는 속성을 통해 해당 요소를 참조할 수 있습니다.

그 참조된 내용은 Vue의 $refs라는 객체에 해당하는 hello라는 이름으로 들어가서 저장이 되는 구조를 갖고 있습니다.

다만, HTML과 연결된 직후만 사용이 가능하므로 created()라는 라이프사이클에서는 사용이 불가합니다.

 

1.3 컴포넌트에서 Refs 사용 예시

//App.vue(부모 컴포넌트)
<Hello ref="hello" />
import Hello from '~/components/Hello'

export default {
  components: {
    Hello
  },
  mounted() {
    console.log(this.$refs.hello.$el)
  }
}
</script>

//Hello.vue(자식 컴포넌트)
<h1>Hello~</h1>

컴포넌트를 ref라는 속성으로 어떠한 이름(hello)으로 참조를 할 경우에는 참조된 이름 뒤쪽에 $el을 명시해줘야만 해당하는 내용을 참조할 수 있습니다.

그러나 여기서도 컴포넌트의 최상위 요소가 2개 이상이면 $el 속성으로 어떤 요소를 바라봐야하는지 알 수 없게 됩니다.

 

//App.vue(부모 컴포넌트)
export default {
  components: {
    Hello
  },
  mounted() {
    console.log(this.$refs.hello.$refs.good)
  }
}

//Hello.vue(자식 컴포넌트)
<h1>Hello~</h1>
<h1 ref="good">Good?</h1>

이러한 경우에는 자식 컴포넌트에 ref라는 속성에 이름을 명시하고 부모 컴포넌트에는 $el 이 아닌 $refs의 속성에 자식 컴포넌트에 명시한 이름을 코딩해주면 됩니다.