[Vue.js] Template refs

 

 

🚀 템플릿 refs란?

Props와 Event가 존재하지만, 자식 요소에 JavaScript를 이용해 직접 접근해야 할 때가 있는데, 이 때 `ref` 속성을 이용해 참조(Reference) ID를 자식 컴포넌트나, HTML 요소에 부여함으로 직접 접근하게 해 주는 것이에요.

 

<input ref="input" />

 

위와 같이 컴포넌트가 Mount 되었을 때, 프로그래밍 적으로 input에 focus를 하고자 하는 경우 등에 유용하게 사용할 수 있는 것이에요.

 

const app = Vue.createApp({})

app.component('base-input', {
  template: `
    <input ref="input" />
  `,
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

 

혹은 다른 `ref`를 컴포넌트 자체에 선언하고, 부모 요소로부터 `focusInput` Event를 받기 위해 사용할 수도 있는 것이에요.

 

<base-input ref="usernameInput"></base-input>

 

this.$refs.usernameInput.focusInput()

 

 

💡 참고 사항 :
`$refs`는 컴포넌트가 Rendering된 뒤 존재하게 된다.
해당 속성은 자식 요소에 직접 접근하기 위해서만 사용되어야 한다.
즉, 템플릿이나, computed 속성에서 `$refs`에 접근해서는 안된다.

 

부연 설명을 해보자면 `ref`로 Tag 이름을 지어준 뒤 커서 위치를 focus로 input에 옮겨 줄 수 있는 것이에요. `ref='이름'`으로 특정 태그에 이름을 지어주는 것이에요. 그렇게 되면 `$refs.이름`으로 접근이 가능해 지는 것이에요.

 

Vue를 이용하면 직접 DOM Element에 접근할 경우가 거의 없는 것이에요. 하지만, 가끔 DOM을 직접 접근하여 조작 해줘야 할 때가 있는데, 이 때가 특정 영영게 focus를 주기 위해 많이 이용되고, 이 때, 이용되는 속성이 `$ref`인 것이에요.

자바 스크립트에서는 querySelector가 같은 역할을 한답니다!

 

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

<script>
export default {
  mounted(){
    console.log('target', this.$refs.target);
  }
}
</script>

 

위와 같은 코드가 있을 때, 접근하고 싶은 태그에 `ref` 속성을 할당 하는 것이에요. 참고할 만한 것은 `ref`는 id처럼 중복 사용이 불가능한 것이에요.

위에서 console.log로 해당 내용을 찍게 되면 `$refs`로 해당 태그에 접근 할 수 있게 되는 것이에요.
그렇게 되면 Console에는 `<input type="text">` 가 출력될 것이에요.

 

또한, `$refs`는 component가 Rendering 된 뒤에 접근이 가능한 것이에요.
만약, beforeCreate(), created()에서 `$refs`로 접근하려고 하면 `undefined`가 출력 될 것이에요.