[Vue 3] v-once 정적 렌더링

Vue는 데이터들을 보고 특정 태그들을 다시 렌더링하곤 합니다. 하지만 한번 렌더링한 이후 변할 필요없는 경우 Vue가 계속 관리하는 것은 성능에 좋지 않습니다. 그래서 이를 정적 컨텐츠로 만들고 생략하도록 하는 디렉티브가 v-once 입니다. 자세히 알아보겠습니다.

v-once 미리보기

v-once

한 번(once)이라는 뜻에 맞게, 데이터 바인딩으로 일어난 렌더링을 한 번만 하도록 하는 디렉티브입니다.

v-once 문법

다른 디렉티브와 다른 점은 값을 넣지 않고 속성 자체만 들어갑니다.

      <태그 v-once></태그>
    

v-once가 들어간 태그 내에도 동일하게 적용됩니다.

      <div v-once>
	<h1> {{ title }} </p> <!-- v-once 적용 -->
	<h2>
		<span> {{ subTitle }} <span> <!-- v-once 적용 -->
	</div>
</div>
    

v-once 예제

예를 들어 title이라는 값이 있다고 해보겠습니다.

      data() {
	return {
		title: "Welcome to Vue!"
	}
}
    

그리고 v-once를 적용한 것과 아닌 것을 비교해보겠습니다. 버튼을 클릭하면 Bye라고 문자가 바뀝니다.

      <h1 v-once>{{ title }}</h1>
<h1>{{ title }}</h1>

<button @click="title = 'Bye'">Button</button>
    

버튼 클릭시 글자가 Bye로 바뀌게 됩니다.

v-once 용도

데이터 바인딩을 해서 렌더링한 후 정적 컨텐츠로 바꾸는 이 기능은 어디에 쓰면 좋을까요?

      <ul>
	<li v-for="item of list" v-once>{{ item }}</li>
</ul>
    

      <article v-html="doc" v-once></article>
    

v-once 가 Vue 3부터는…

그대로 사용할 수도 있지만 v-memo라는 디렉티브가 생기면서 좀 더 다양한 용도로 사용할 수 있는데요. v-memo에 넣은 배열 중 하나의 값이라도 바뀌면 그 때서야 업데이트 합니다.

      <태그 v-memo="[value1, value2, ...]"></태그>