[Vue3] 랜더링 문법(v-if, v-show)

• v-if
• v-show
• 차이점

 

 

 

 

● v-if

<h1 v-if="bRender"> 화면1 <h1>

<h1 v-else> 화면2 </h1>

 

- bRender 가 true 이면, "화면1"이 화면에 랜더링되고

false일 경우 화면에 랜더링되지 않는다.

 

- 만약 v-else 태그가 있을 경우 bRender가 true가 아니면 화면2가 화면에 보인다.

 

 

 

● v-show

 

<h1 v-show="bShow"> 쇼1 <h1>

 

bShow 가 true이면 쇼1이 화면에 보인다.

 

---

 

※ 차이점

 

* v-if 는 조건에 만족했을 경우 그 순간 html블록이 생성되고 -> 조건에 만족하지 않으면 html블록이 삭제된다.

* v-show 는 조건 만족 여부에 상관없이 무조건 html블록이 생성되고,

                   조건을 만족하면 css의 display를 이용해서 화면에 출력, 만족하지 않으면 화면에서 숨김처리

따라서 v-show 는 조건 만족 여부에 관계없이 무조건 랜더링 되는 것이다.

 

 

 

Tip 실무에서 적용 시

해당 블록이 toggle이 일어날 때 
v-if 는 해당 블록 전체를 생성했다가 삭제하기 때문에 더 많은 자원을 사용하게 된다.
v-show 는 제일 처음에 조건이 만족하지 않더라도 html 블록을 무조건 생성한다는 단점이 있다.

해당 html이 화면 내에서 자주 toggle이 일어난다면 v-show를 사용하고
아니라면 v-if 를 사용하는 것이 좋다.