[Vue 3] v-cloak 일시적으로 감추기

Vue를 구현하다보면 template에 넣어놨던 mushtach tags({{}})가 아주 잠깐 보였다가 사라지는 경우가 있습니다. 원하는 결과로 렌더링된다는 점은 같지만, Vue가 처리해주기 전에 나타나는 템플릿이 마음에 들지 않은 경우 잠시 숨겨놓고 싶을텐데요. v-cloak 디렉티브를 이용하면 됩니다.

v-cloak 미리보기

rerun을 클릭해 실행해보세요.

v-cloak

해리포터에서 투명해지는 망토(vloak)라는 본적 있을텐데요. 이것도 그런 역할과 비슷합니다. codepen에서 message 값을 잠시 바꿔보면 {{ message }}가 잠시 나타났다가 사라집니다.

Vue의 template의 내용을 처리하기 전에 렌더링되서 발생하는 문제인데요. Vue가 처리하기 전까지는 잠시 숨겨둘 필요가 있는데 v-cloak이 그 역할을 해줍니다.

v-cloak 문법

속성처럼 v-cloak을 넣어주면 됩니다.

      <태그 v-cloak></태그>
    

이 뿐만 아니라 css에 v-cloak 속성이 들어간 태그를 처리해주는 코드를 추가해야합니다.

      [v-cloak] { display: none; }
    

css 문법에서 []는 해당 속성이 존재하는 경우 선택해주는 속성 선택자입니다.

v-cloak 특징

만약에 message: ‘안녕하세요’ 처럼 데이터가 들어있고 다음처럼 v-cloak을 사용한다고 해보겠습니다.

      <p v-cloak> {{ message }} </p>
    

그러면 렌더링은 다음과 같이 됩니다.

      <p>안녕하세요</p>
    

왜냐하면 v-cloak은 Vue가 처리 완료하기 전까지 존재했다가 완료가 된 이후에는 사라지기 때문인데요. 그래서 v-cloak이 있는 동안에는 display:none이 적용되었다가 사라지면서 적용되지 않고 보여지는 것이죠!