지금까지 우리는 {{ mustached }} 기호를 통해서 Vue 내의 값 혹은 함수를 불러왔습니다.
하지만 화면에 문자열을 출력해야하는 간단한 경우가 아니라 HTML 속성 내에서 Vue에 선언된 값을 사용하고 싶어진다면 어떻게 해야할까요? 예로 링크를 달 수 있는 a 태그의 href 속성 값에 Vue 내에 선언된 값을 넣고 싶은 경우가 있을 수 있습니다.
<a href="{{ link }}">링크</a> // (x) 이렇게 사용할 수 없음안타깝게도 HTML의 속성에는 {{ mustached }}를 사용할 수 없습니다. 위의 예와 같이 a 태그의 href 속성 값을 변경하고 싶은 경우라면 {{ mustached }} 대신 v-bind 디렉티브를 사용해야합니다.
디렉티브 Directive?
디렉티브란, 이처럼 HTML 태그 안에 들어가는 속성의 역할을 하며, v-라는 접두사가 붙는 것이 특징입니다. 디렉티브는 여러가지가 있는데, 하나하나 배워보도록 하겠습니다.
html 속성에 접근하는 v-bind
이중 우리는 먼저 html 속성에 Vue내의 값을 사용할 수 있도록 도와주는 v-bind 디렉티브를 살펴보겠습니다.
[HTML]
a 태그 내에 href="링크주소" 속성이 있어야하는 곳에 v-bind 디렉티브를 넣어서 <a v-bind:href="link">링크</a>라고 입력하였습니다.
[JavaScript]data의 link 값에서 확인할 수 있듯이 우리가 원하는 링크(https://medium.com)가 선언되어 있습니다.
이렇게 v-bind 디렉티브를 사용하여 Vue 인스턴스 내에 선언된 값을 HTML 코드의 속성 값에 사용할 수 있습니다.
약어
프로그래밍 공부를 하다보면 개발자들이 죽기보다 싫어 하는 한가지를 발견할 수 있습니다. 바로 같은 코드를 또 작성하는 것입니다. 그래서 효율적이고 짧은 코드를 지향하는 개발자들을 어렵지 않게 만나실 수 있으실 겁니다. 하지만 장황하고 긴 코드들은 비효율적인 느낌이 들 수 있고, 그렇다고 또 너무 컴팩트하게 줄이면 코드의 가독성이 떨어지기 때문에 개발자들은 그 사이에서 아름다운 밸런스를 찾으려고 노력합니다. Vue에서도 자주 사용되는 디렉티브의 반복을 피하기위해 약어, 줄임말을 제공합니다.
v-접두사는 템플릿의 Vue 특정 속성을 식별하기 위한 시각적인 신호 역할을 합니다. 이 기능은 Vue.js를 사용하여 기존의 마크업에 동적인 동작을 적용할 때 유용하지만 일부 자주 사용되는 디렉티브에 대해 너무 장황하다고 느껴질 수 있습니다. 동시에 Vue.js가 모든 템플릿을 관리하는 SPA를 만들 때v-접두어의 필요성이 떨어집니다. 따라서 가장 자주 사용되는 두개의 디렉티브인v-bind와v-on에 대해 특별한 약어를 제공합니다. — VueJS 공식 가이드 중
위의 공식 가이드 내용처럼 Vue는 자주사용되는 v-bind와 v-on 디렉티브에 대해서만 특별한 약어를 제공합니다. 우리는 아직 v-on에 대해 배우지 않았지만 일단 약어를 익혀두고 v-on에 대해 배울때 다시 이곳에 와서 약어를 확인해보시면 좋을 것 같습니다.
v-bind 약어 :
v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있습니다.
v-on 약어 @
v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기해줄 수 있습니다.
위의 v-bind 약어를 사용해 위의 예제를 똑같이 작성해보면
[HTML]
전체를 다 써준것과 같은 결과를 보여주는 것을 확인할 수 있습니다.
마치며
이번시간에는 디렉티브의 첫 시간으로 v-bind에 대해 알아보았습니다. 다음 시간에는 한 번 렌더링을 한 이후에는 그 값이 변하지 않도록 제한하는 일회성 제한 디렉티브 v-once에 대해 알아보겠습니다.
