"v-cloak" - vue

v-cloak은 수많은 v- 디렉티브 중 하나이다.

vuejs에서 렌더링이 완료되기 이전에, 브라우저에서 보이지 않도록 감춰주는 역할을 한다.
감추는 것을 v-if나 v-show 등으로 제어하면 되는데,
왜 굳이 v-cloak라는 것을 별도로 사용하여야 할까?

vuejs의 렌더 flow

1. 브라우저 페이지 소스 로드
2. vuejs 프레임워크 실행
3. vuejs 처리 완료

vuejs가 처리되는 3번 이전의 단계에서는,
{{}} 같은 콧수염 표현식이나 v-if 등을 통하여 조건부 렌더링을 걸어놓았더라도 그대로 화면에 노출이 되어버린다!
vue에서 렌더링이 되기 전까지 아주 잠깐 보여지는 것을 막고자 사용하는 것이 v-cloak이다.

v-cloak의 적용 방법

감추고자 하는 element에 디렉티브로 기입해준다.
vuejs의 처리가 완료되고 나면, v-cloak 디렉티브를 사라진다.
template 태그에서 v-cloak이라는 attribute가 자동으로 제거되는 것이다!(오 놀라워라)

<template>

//감추고 싶은 태그에 디렉티브로 작성
<div v-cloak>보여주고 싶지 않아</div>

감추고 싶은 element에 v-cloak을 작성해주었다면,
style의 요소로 v-clock에 대하여 정의해주어야 한다.
<style>

[v-cloak] {
    display: none;
}

vuejs가 모든 DOM 요소에 대한 처리를 완료하면,
v-cloak이 사라지고 '보여주고 싶지 않아'가 작성된 div 태그가 화면에 나타나게 될 것이다.