[Vue.js] 20. 컴포넌트 - Refs

기본적으로 JavaScript에서 요소를 선택하기 위해서는 다음과 같은 로직이 필요하다.

이는 모든 h1요소를 선택할 위험이 존재하므로 보통은 h1 태그에 id나 class선택자를 이용해 고유한 이름을 붙인다.

 

Vue.js 에서는 이러한 기능을 독자적인 문법으로 제공한다.

Refs

Ref는 HTML요소를 연결하는 만큼, mount 된 이후에만 사용할 수 있다.

 

다른 컴포넌트 또한 ref로 참조할 수 있다.

$el을 참조해보면 해당 컴포넌트의 HTML 구조를 확인할 수 있다.

만약 컴포넌트의 최상위 요소가 2개 이상 이라면 $el만으로는 찾을 수 없다.

해결 방안은 컴포넌트의 요소에도 ref를 사용하는 것이다.