Vue의 조건부 렌더링(v-if, v-show) 비교 | v-for과의 병행 사용?

조건부 렌더링

🎈v-if 와 v-show

v-if는 false일때는 렌더링되지않고 true일때만 렌더링된다.

v-show는 조건에 관계 없이 항상 렌더링 된다. (false 일 경우 css display:none 속성으로 전환)

 

v-if는 전환 비용이 높다.

v-show는 초기 렌더링 비용이 높다.

 

즉, 무언가를 자주 전환해야한다면 v-show를 사용하고,

런타임 조건이 변경되지 않는다면 v-if가 낫다.

 

🎈v-if 와 v-for

v-if와 v-for은 함께 쓰는 것을 권장하지 않는다.

동일하게 사용할 경우 v-if가 더 높은 우선순위를 갖는다.