Vue.js v-cloack | 중괄호 깜박임 없애기

v-cloak이란?

VueJS의 v-cloak 디렉티브에 대하여 알아보자.

VueJS에 사용되는 v-clock은 내장 디렉티브로 VueJS에서 렌더딩 되기 전에 브라우저에서 감추는 역할을 한다. 여기서 감춘다는 뜻은 감추고 보여주는 역할의 v-if 또는 v-show와는 다르다.

다른 점을 알아보기 위해 먼저 Vue.js의 동작 방식을 알아야 보도록 하자.

1. 브라우저에서 페이지 소스를 로딩
2. VueJS 프레임워크를 실행
3. VueJS 처리 완료

위 처리 과정에서 Vue.js가 처리되기 전에 화면에는 {{ }} 표현식 또는 v-if 등을 사용해 보여주지 않을 내용들이 그대로 노출되게 된다.
Vue.js에서 렌더링 되기 전 까지의 아주 잠깐이지만 어쩔 수 없는 과정이다. 이를 피하기 위해서는 v-cloak을 사용하면 해결할 수 있다.

VueJS v-cloak을 사용한 구현

v-cloak을 Element에 적용하면 VueJS의 처리가 완료된 후에 v-cloak 디렉티브를 자동으로 제거된다. 다시 말해서 태그에서는 v-cloak 이라는 Attribute를 제거하게 된다. 그래서 v-cloak으로 적용된 요소를 화면에 노출되지 않도록 하는 CSS의 속성인 display: none;을 지정하면 Vue.js의 프로세스가 완료되기 전까지는 해당 Element가 화면에서 사용자에게 노출되지 않는다.

먼저 기능 구현을 위해 아래와 같이 v-cloak이 적용되면 태그 요소는 감춰지고 안보이도록 display: none을 지정한다.

[v-clock] {
  display: none;
}

그리고, 적용할 태그에는 아래처럼 v-cloak 디렉티브를 추가한다.

<div v-cloak>
    Hello, {{ name }}
</div>

이것으로 VueJS가 모든 DOM 요소의 처리를 완료되면, 자동으로 v-cloak이 사라지고 적용되었던 태그 요소들이 화면에 출력되게 된다.

v-cloak을 사용하여 로딩 메시지로 바꾸기

v-cloak은 로딩 후에 자동으로 사라지게 된다는 것을 알았다. 이를 또 다른 방법으로 로딩메시지로 바꾸는 방법도 존재한다. CSS Style에 아래와 같이 적용하면, 가상 선택자 ::before를 사용하여 “Loading"이라는 문구를 출력하고 그 뒤에 해당하는 모든 요소는 안보이도록 하는 간단한 방법이다.

[v-cloak]::before {
  content: '로딩중...'
}

[v-cloak] > * {
  display:none;
}

참고

• v-cloak | Vue.js