[VueJS] v-cloak : 렌더링 되기 전 {{ }}(머스태쉬 태그) 숨기기

vueJS에서 제공해주는 v-cloak 디렉티브에 대해 알아보자.

 

vueJS를 사용하자마자 눈에 거슬리는게 있는데, 이게 바로 머스태쉬 태그{{}} 이다.

script 코드가 아직 실행되기 전이여서 값이 바인딩 되기 전에 깜빡이며 잠깐 보이는건데 이게 매우 거슬린다.

 

이럴때 사용하는게 v-cloak 디렉티브이다.

v-cloak 디렉티브를 사용하여 렌더링되어 바인딩 되기 전에 {{}}태그를 숨길 수 있다.

 

예제 코드를 통해 사용방법에 대해 알아보고 vueJS를 사용하면서 거슬렸던 깜빡임을 제거해보자.

---

▷ 예제1) v-cloak 디렉티브 기본 사용법

<div id="example">
  <p>메시지: "{{ message }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
})

 

이렇게 간단하게 설정된 코드가 존재한다고 하면,

당연히 화면에서는 message값이 바인딩 되어 "안녕하세요"가 나오는게 정상이다.

 

허나, 그 바인딩 되는 과정에서 화면에는 흉측한 {{ message }} 코드가 보이게 된다.

 

▷ 결과 1 ) - 바인딩 되기 전

▷ 결과 2 ) - 바인딩 된 후 화면에 출력

---

여기서 이제 우리는 v-cloak 디렉티브를 사용할 것이다.

추가적으로 몇가지 작업을 해주자.

 

[v-cloak] { display: none; }

<div id="example" v-cloak>
  <p>메시지: "{{ message }}"</p>
</div>

 

▷ 결과 3 ) - 바인딩 된 다음에만 화면에 출력

---

css 에 v-cloak에 대한 display: none; 을 설정해주고, dom 태그 속성에 v-cloak을 걸어주면된다.

 

v-cloak 디렉티브에 대해 display: none;을 해줬는데 어째서 결과가 출력되냐면,

v-cloak 디렉티브는 vueJS의 처리가 완료되기 전까지는 존재하고 완료된 후에는 스스로 제거하기 때문이다.

 

즉, 바인딩 되기 이전 {{}}태그가 존재할때는 display:none의 효과를 받으면서 바인딩이 완료되면 스스로 사라지기 때문에 css 적용없이 그대로 보여지게 되는것이다.

 

vueJS 코드가 복잡하거나 시스템이 느린경우 v-cloak 디렉티브는 꼭 필수적으로 사용해주는 것이 좋아보인다.