컴포넌트 - Refs

컴포넌트의 템플릿, refs 키워드에 대해 살펴보도록 합시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. 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)으로 참조를 할 경우에는 참조된 이름(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의 속성에 자식 컴포넌트에 명시한 이름을 코딩해주면 됩니다.