[VueJS] v-once : 정적 콘텐츠 지정, 정적 디렉티브

vueJS의 기본 디렉티브 중 하나인 v-once에 대해 알아보자. 

 

제목처럼 v-once가 정적 디렉티브라 불리는 이유는 처음 한번만 렌더링을 수행하며, 그 이후 데이터가 변경되어도 그대로 유지되기 때문이다.

즉, 처음 렌더링 된 후 캐싱되도록 지정한다고 생각하면된다.

 

이러한 특성을 사용하여 정적 콘텐츠를 지정할 수 있다.

예제를 통해 실제 어떻게 적용되는지 알아보도록 하자.

---

▷ 예제1) v-once 기본 사용법

<div id="example">
  <p v-once>유지 메시지: "{{ message }}"</p>
  <p>변경 메시지: "{{ message }}"</p>
  <button @click="change()">내 블로그는 mine-it-record야</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  methods : {
    change : function(){
      this.message = '내 블로그는 mine-it-record야'
    }
  }
})

 

▷ 결과 1) 초기 출력

---

위 결과 1) 과 같이 출력된다고 할때 버튼을 클릭하면 message가 변경되도록 구성해 놓았다.

 

html 영역을 보면 유지 메시지에 v-once를 걸어두었는데, 이 때 버튼을 클릭하면 어떻게 될까?

다음 결과를 확인해보자.

 

▷ 결과 2) 버튼 클릭 후 출력

---

결과 2와 같이 v-once를 선언해둔 곳은 이후 값이 변경된다 하여도 처음 렌더링할때의 값을 유지한다.

상황에 따라 사용하면 매우 좋을것 같으나, 이러한 패턴을 남용하지 않는것을 권장한다.

 

아래 안내문구를 한번 읽어보고 마치도록하자.

다시 한번 강조하지만, 이러한 패턴을 남용하지 마세요. 이는 렌더링할 정적 컨텐츠가 굉장히 많은 경우에 편리하게 사용할 수는 있지만, 느리게 렌더링 되는 것을 인지하지 못할 정도라면 필수적이지 않습니다. -- 더해서, 이런 방식은 추후에 많은 혼란을 야기할 수 있습니다. 예를 들어, v-once에 친숙하지 않은 개발자이거나 실수로 놓치는 경우에 그들은 템플릿이 정상적으로 업데이트 되지 않는 문제에 대해서 많은 시간을 소비하게 될 수 있습니다.

 

참고 : https://vuejs.org/api/built-in-directives.html#v-once

Built-in Directives | Vue.js