v-if, v-show 차이

VueJS로 개발을 하다보면 화면을 숨기거나 조건에 따라 다르게 보여줄 경우 v-if, v-show directive를 활용하여 처리하는 경우가 많다.

하지만 v-if와 v-show를 경우에 따라 알맞게 사용해야 성능에 유리하다.

 

v-if

조건부 렌더링을 수행한다. 조건에 맞지 않으면 초기 렌더링 때 DOM에 유지 되지 않는다.

 

v-show

display: none, display: block의 차이이다. 초기 렌더링 때 DOM에 유지 된다.

 

사소한 차이지만 우리는 경우에 따라 v-if, v-show directive를 나눠서 사용할 수 있다.

Toggle 작업이 자주 일어나는 경우 v-show가 유리하고, Toggle 작업이 별로 일어나지 않는 경우에는 v-if가 성능적으로 유리하다고 생각 할 수 있다.