[Vue] 조건부 렌더링 v-if 와 v-show

Vue 에서 조건부 렌더링을 할 때 사용하는 디렉티브는 v-if와 v-show가 있다.

v-if와 v-show의 가장 큰 차이점은 v-if는 주석, v-show는 display:none으로 처리된다.

 

v-if (v-else, v-else-if)

 

v-if는 조건에 만족하면 렌더링을 하고 조건에 만족하지 않으면 DOM 레벨에서 제거되며, 모든 감시 (watch 등..)도 제거된다.

또한, 컴포넌트라면 인스턴스가 제거되며 이 후 렌더링 할때 모든 상태가 초기화 된다.

 

v-if는 내부에서 디렉티브 또는 컴포넌트를 많이 사용하는 경우, 특정한 데이터를 따로 가지고 있지 않다면 오류가 발생했을 때 v-if를 사용하는 것이 좋다.

 

 

<div v-if="temp">temp의 값이 true일 경우 보여집니다</div>

 

<div v-if="temp">temp의 값이 true일 경우</div>

<div v-else>temp의 값이 false일 경우</div>

 

<div v-if="type === 'A'">type이 A일 경우</div>

<div v-else-if="type === 'B'">type이 B일 경우</div>

<div v-else-if="type === 'C'">type이 C일 경우</div>

<div v-else>type이 A/B/C 모두 아닐 경우</div>

 

** v-else 엘리먼트는 v-else-if 엘리먼트 바로 뒤에 있어야 한다.

 

v-show

 

v-show는 display:none 처리를 하며 DOM 레벨에서 제거되지 않는 상태이으로 내부적인 감시가 일어나 주의해야한다.

내부에 디렉티브 또는 컴포넌트가 없고, 변경 빈도가 높은 경우에 v-show를 사용하는 것이 제일 좋다.

 

v-if vs v-show

 

v-if는 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기 때문에 "진짜" 조건부 렌더링 이다. 또한 v-if는 게으르다. 초기 렌더링에서 조건이 거짓인 경우 아무것도 하지 않는다. 조건 블록이 처음으로 참이 될 때까지 렌더링 되지 않는다.

 

비교해보면 v-show는 훨씬 단순하다. CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 된다.

 

일반적으로 v-if는 토글 비용이 높고, v-show는 초기 렌더링 비용이 더 높다.

자주 바꾸길 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장한다.