$refs

vue에서는 $refs를 통해  DOM에 접근이 가능합니다.

template안의 element에 ref 속성을 추가함으로써 vue instance에 이 element의 정보를 줄 수 있습니다.

또한 이 엘리먼트에 접근할 수 있습니다.

 

ref는 HTML의 표준속성이 아니며 심지어 DOM의 일부가 아니기도 합니다.

그래서 HTML 렌더링 후 콘솔창에서 ref 속성을 찾을 수 없습니다.

 

$refs 객체의 키는 엘리먼트의 ref속성에 정의한 값이 되며 값은 해당 DOM엘리먼트입니다.

엘리먼트에 접근할 수 있다는 건 엘리먼트를 변경할 수도 있다는 것입니다.

 

물론 javascript의  querySelector를 통해 DOM 엘리먼트에 접근할 수 있다

그러나 ref속성은 vue에 더 좋은 방식입니다.

또한 ID나 CLASS에 의존하지 않아도 되어 조금 더 안전하다고 할 수 있습니다.

 

vue의 목적 중 하나는  개발자가 DOM을 다루지 않도록 하는 것입니다. 

그러므로 되도록이면 ref를 사용하는 것을 피하도록 합시다.

 

결론-- $refs로 DOM에 접근 가능하나 vue의 목적에는 부적합