Vue.js의 $refs를 통하여 DOM에 접근하기

출처 : https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

Accessing the DOM in Vue.js with $refs

뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있습니다.

템플릿 안의 엘리먼트에 ref 속성을 추가함으로서, 뷰 인스턴스에 이 엘리먼트에 대한 정보를 줄 수 있습니다.

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

 

ref속성은 HTML의 표준속성이 아니며(뷰에 의해서만 사용된다), 심지어 DOM의 일부가 아니기도 합니다.

그래서, HTML 랜더링 후, 우리는 콘솔창에서 ref 속성을 찾을 수 없습니다.

const targetEls = this.$refs.section;
console.log(targetEls.getAttribute('ref')); // null

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

<template>
	<input ref="input" placeholder="아이디를 입력해주세요" />
</template>

// $refs 객체
{
	input: <input placeholder="아이디를 입력해주세요" />
}

우리가 엘리먼트에 접근할 수 있다는 것은 곧, 엘리먼트를 변경할 수 있다는 것과 같습니다.

 

물론, 우리는 순수 자바스크립트의 querySelector를 이용해 DOM 엘리먼트에 접근할 수 있습니다.

하지만, ref 속성은 좀 더 깔끔하며 뷰에게 좋은 방식입니다.

또한 ID나 CLASS 속성에 의존하지 않아도 되므로 좀 더 안전합니다.

 

뷰의 가장 중요한 목적 중 하나는 개발자가 DOM을 다루지 않게 하는 것입니다.

 

이슈 CASE1. $refs를 통해 innerText를 변경하면 내부 데이터의 값을 덮어 씁니다.

<h1 ref="message">{{ message }}</h1>

setTimeout(function() {
	vm.$refs.message.innerText = 'This is a test';
}, 2000);

setTimeout(function() {
	vm.message = 'This is another test';
}, 4000);

결과

이유

DOM 요소에 접근하고 DOM요소를 직접 조작할 때, 가상 DOM을 본질적으로 건너뛰고 있기 때문입니다. 따라서 Vue는 템플릿의 복사본을 보유하고 있으므로 h1 요소를 계속 제어 하고 있으며, Vue가 데이터 속성의 변경 내용에 반응하면 가상 DOM과 그 이후 DOM을 업데이트 합니다. 따라서 조심히 사용하지 않으면 적용된 변경사항을 덮어 쓸 수 있으므로 DOM에 변경 사항을 직접 적용하는 데, 주의해야 합니다. ref를 사용할 때 DOM을 변경할 때는 주의해야하지만, DOM에서 값을 읽는 것과 같은 읽기 전용 작업은 안전합니다.

 

그러므로, 되도록 ref를 사용하는 것을 피하는게 좋습니다.

 

마지막으로, v-for 디렉티브와 함께 ref 속성이 어떻게 쓰이는지 보여드리겠습니다. v-for 디렉티브를 사용해서 1부터 10까지 <li>를 만들고, console을 통해 $ref를 찍어보겠습니다.

numbers는 DOM 요소들의 배열입니다. v-for 디렉티브와 ref 속성이 함께 쓰일 때, Vue는 루프의 모든 반복에 대한 DOM 요소를 수집하여 배열 내에 배치합니다. 이 경우, 루프가 10번 돌기 때문에 li DOM 요소가 10개로 구성된 배열을 얻을 수 있습니다. 각 요소들은 이전에 봤던 것처럼 사용할 수 있습니다.