한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Refs

특정한 요소나 컴포넌트를 참조할 수 있는 Refs라는 개념을 살펴보도록 하겠습니다.

1. 데이터 추출 기본 개념

mounted라는 라이프사이클을 통해서 h1요소의 데이터를 한번 추출해내고 싶은 경우 아래와 같이 코드를 작성할 수 있습니다.

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

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

하지만 이러한 방법은 특정한 요소를 document.querySelector을 통해서 html전체에서 검색을 해야하는 개념으로 요소를 정확하게 집어내기 위해서는 해당하는 요소에 class나 id를 부여하는 것을 권장합니다.

2. Refs

2-1 기본개념

Vue에서 제공하는 ref라는 속성을 통해 조금 더 간소화해 해당 요소를 참조할 수 있습니다. 그리고 그 참조된 내용은 Vue의 $refs라는 객체에 해당하는 hello라는 이름으로 들어가서 저장이 되는 구조를 갖고 있습니다.

<template>
  <h1 ref="hello"> //id대신 vue.js의 ref속성 사용
    Hello world!
  </h1>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.hello.textContent) //refs(복수형태)
  }
}
</script>

2-2 Refs 주의사항

단, 해당하는 요소들은 이러한 컴포넌트가 HTML과 연결된 직후에만 사용이 가능합니다. 그렇기 때문에 created()라는 라이프사이클에서는 사용이 불가하며 mouted()에서 사용이 가능 합니다.

2-3 컴포넌트에서의 Refs 사용예시

Hello.vue에 명시된 h1요소를 App.vue에서 참조를 하는 코드를 작성해보도록 하겠습니다.

Hello.vue

<template>
  <h1>Hello~</h1>
</template>

App.vue

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

<script>
import Hello from '~/components/Hello'

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

$el이 해당하는 컴포넌트의 최상위 엘리먼트를 의미합니다. 여기서는 h1입니다.

  mounted() {
    console.log(this.$refs.hello.$el)
  }
}

따라서 컴포넌트를 ref속성을 통해서 어떠한 이름으로 참조할 때는 참조된 이름의 뒤에다가 $el을 적어줘야 해당하는 내용을 참조할 수 있습니다.

또한 주의해야하는 부분은 자식 컴포넌트의 최상위 요소가 여러개라면 정확히 어떤 요소를 바라봐야하는지를 알 수 없기 때문에, 원하는 요소만 참조할 수 있도록 만들어줘야합니다.

<template>
  <h1>Hello~</h1>
  <h1 ref="good">
    Good?
  </h1>
</template>

  mounted() {
    console.log(this.$refs.hello.$refs.good)
  }
}