26. Vue - 컴포넌트 Refs

1. Refs란?

-  Vue에서만 제공하는 개념으로, 특정한 컴포넌트 또는 요소를 참조하는 방식을 말한다. 

- 기존에 JS를 사용하여 컴포넌트를 참조하는 방법을 개선시킨 형태다. 

---

2. Refs를 사용하는 이유 

a) 예제코드

[App.vue]

<template>
  <h1 id="hello">
    Hello world!
  </h1>
</template>

<script>
export default {
  mounted() { // 라이프 사이클
    const h1El = document.querySelector('#hello')
    console.log(h1El.textContent)
  }
}
</script>

 

- h1태그가 갖고있는 내용을 콘솔에 출력하고 싶은 경우, 위와 같은 코드를 작성할 수 있다. 

- 그러나 Vue에서 제공하는 Refs를 사용하면 보다 적은 줄의 코드로 동일한 기능을 사용할 수 있다.  

 

 

b) Refs 예제코드

[App.vue]

<template>
  <h1 ref="hello">
    Hello world!
  </h1>
</template>

<script>
export default {
  mounted() { // 라이프 사이클
    console.log(this.$refs.hello)
    console.log(this.$refs.hello.textContent)
  }
}
</script>

 

[출력화면]

클릭하면 확대됩니다.

 

 

c) 코드해설

- HTML 엘리먼트에 id 또는 class 명으로 선택자를 사용했다면, Vue Refs에서는 ref라는 속성값을 사용하여 선택자를 생성한다. 

- ref 선택자는 $refs라는 이름으로 참조가 가능하며, 할당한 refs 이름을 객체로서 선택할 수 있다.

- 더불어, refs 예제코드에서 나온 것 처럼 textContent 외에 ref 객체의 다양한 속성들을 사용할 수 있다.  

---

3. 주의사항

- refs는 HTML 요소들이 컴포넌트들(= template, script, etc)과 결합된 후(= mounted)에만 사용이 가능하다. 

- 그러므로 created와 같은 라이프 사이클에서는 시점이 맞지 않기 때문에 refs를 사용할 수 없다. 

 

a) 예제코드

[App.vue]

<template>
  <h1 ref="hello">
    Hello world!
  </h1>
</template>

<script>
export default {
  created() {
    console.log('created() ==> ',this.$refs.hello)

  },
  mounted() { // 라이프 사이클
    console.log('mounted() ==> ', this.$refs.hello)
    console.log('mounted() ==> ', this.$refs.hello.textContent)
  }
}
</script>

 

[출력화면] 

클릭하면 확대됩니다.

 

---

4. Refs 활용

- Refs를 이용하여 컴포넌트를 연결하는 방법을 알아보자. 

 

a) 예제코드

[App.vue]

<template>
  <Hello ref="hello" />
</template>

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

 

[출력화면] 

클릭하면 확대됩니다.

 

클릭하면 확대됩니다.

 

 

b) 코드해설

- refs를 이용하여 컴포넌트의 엘리먼트를 받아오면 위의 사진처럼 proxy라는 객체 데이터를 받아 올 수 있다. 

- 사진에서 보는 것과 같이, $ 표시를 이용하여 다양한 객체 및 속성 데이터를 참조할 수 있다. 

- 예를 들어서, $el을 참조하면 해당 element 참조를 의미한다. 다음 사진을 참고하자. 

 

 

클릭하면 확대됩니다.

 

클릭하면 확대됩니다.

- 이처럼 refs 속성을 통해서 어떤 컴포넌트를 참조하는 경우, $ 표시를 이용하여 다양한 속성을 사용할 수 있다. 

 

 

c) 주의사항

- 만약 컴포넌트의 최상위 엘리먼트가 1개 이상인 경우에는 어떻게 될까? 

- 예상하는 것 처럼, 어떤 요소를 참조하는지 알 수 없기 때문에 다음과 같은 문제가 발생한다.  

 

Hello.vue

컴포넌트의 최상위 요소가 하나 이상일 때 출력화면

 

 

d) 해결방안

 

- 우선 다음과 같이 컴포넌트 요소를 구분하기 위해 refs를 할당한다. 

Hello.vue

- 위의 사진과 같이 할당하는 경우, 기존에 hello 라는 이름의 ref는 첫번째 h1 태그요소를 참조하게 되는 것이다.

- 그렇다면 question이라는 이름의 ref는 어떻게 참조할까? 

 

App.vue

- App.vue에서 question이라는 ref를 참조할 때는 위의 사진과 같이 재 참조를 할 수 있다. 

- hello.vue 컴포넌트 내부에 question이라는 ref가 존재하기 때문에, 위와 같은 구조의 참조가 작성되는 것이다. 

클릭하면 확대됩니다.

 

- 출력 결과는 다음과 같다.